I often find myself into this:
.class {
border-top:1px dashed #0000000;
border-bottom:1px dashed #0000000;
}
Is there a way to one-line that?
I tried this but doenst' work:
.class {
border:1px 0 dashed #0000000;
}
No but you could make it simpler to maintain by using:
.my_class {
border: 1px dashed #000;
border-right: none;
border-left: none;
}
That what you only need to change one line.
You can use properties for every "side" (top, right, bottom, left) for each single border property, in your case:
.class{
border-color: #000;
border-width: 1px 0;
border-style: dashed;
}
Note that you can specify every property for every side, for example:
.class{
border-color: #000 green blue yellow;
border-width: 1px 2px 3px 4px;
border-style: dashed solid dotted solid;
}
Nope, there's no one-liner for that in pure CSS - you can use the border shorthand only for all four sides at once.
Related
How can I make the border only appear on the top when I hover over it?
Code:
a:hover {
border-top: 3px white;
border-style: solid;
}
It makes the border still appear on all sides, but I want it to appear only on top.
You can also use:
a:hover {border-top: 3px solid white; border-right: 0; border-bottom: 0; border-left: 0;}
If the regular state of your link uses all four borders, then use 0 for the right, bottom, and left borders if you want only the top border on :hover.
a:hover {
border-top: 3px white;
border-style: solid;
border-bottom: 0px white;
border-right: 0px white;
border-left: 0px white;
}
Fixed it. Only appears on the top now. :)
Please try the below code.
border-style: solid;
border-top: thick double green;
border-left:0;
border-bottom:0;
border-right:0;
I think when you use solid it draws border on al sides. The above code will actually get rid of the border from all three sides but not the top.
I need to know how to make a borders between my items like the following image:
I tried making it using border-right and -left but the last item shouldn't have a border-right.
My CSS:
border-top: 1px solid #000;
border-right: 1px solid #000;
How can I apply border-right to all but the last element on the row?
There is a better way to do it that works in older browsers: http://jsfiddle.net/mxV92/.
You simply apply a border on the left for every item that immediately follows another item:
ul > li + li {
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #bbb;
}
If I understand correctly, what you want is to have borders on the right of all the items, except the last item.
You can use the 'last-child' selector for that. For example, if your objects were in a 'div' with the class 'foo', your CSS might look like:
div.foo {
border-width: 1px 1px 0 0;
border-color: #000;
border-style: solid;
}
div.foo:last-child { border-width: 1px 0 0 0; }
This says that divs of class 'foo' should have solid black borders, with a width of 1px on top and right ('border-width' is followed by widths in the order top, right, bottom, left), except on the last item, where the width is '1px' only on the top.
':last-child' should be supported by most modern browsers.
add this to your style.css, turn off border-right every 4th books. (this only works on the desktop version of the site.)
.nspArt:nth-child(4n) .gkResponsive img.nspImage {
border-right: none;
}
You can do this:
.books-collection {
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px 0;
}
.books-collection .book:not(:first-child) {
border-left: 1px solid #bbb;
padding: 5px 0;
}
Whenever I try to set left and right border for an inline-block element in my code, it won't work unless I set all.
border:2px solid black; /* does work */
border:0 2px solid black; /* doesn't work*/
Any idea?
the relevant part of CSS:
#highlights2{
width:640px;
text-align:left;
}
#highlights2 .highlight{
width:211px;
display:inline-block;
height:100px;
background-color:#0dc1d0;
}
#centerhighlight{
border:0 2px solid rgba(0,0,0,0.5);
border:2px solid black;
}
and HTML:
<div id="highlights2"><div class="highlight">asd</div><div style="" class="highlight" id="centerhighlight">fgh</div><div class="highlight">jkl</div></div>
This syntax is not valid for defining borders. If you want different styles for vertical and horizontal borders you need to write it longhand, for example:
border: 2px solid black;
border-top-width: 0;
border-bottom-width: 0;
If you want to use the shorthand for border width, you can use this:
border-width:0 2px;
border-style: solid;
border-color: black;
jsFiddle
.myclass {
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
Is it possible to group properties that share a common definition, such as border-top and border-bottom in the example above.
Something like:
.myclass {
border-top , border-bottom: solid 1px gray; /* <-- grouped properties */
background: #F2F2F2;
}
TIA,
You can using LESS or SASS (I believe), but if you don't want to use those, you can instead group selectors that will have the same property:
.myclass,
.myOtherClass,
.myAnotherClass,
#anIdForGoodMeasure
{
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
This will apply the style to all the elements.
Unfortunaly border doesnt have a shorthand version (Like say margin/padding for example), it has to be the same for all, or different.
However what you can do - is say you want to style one side uniquely, is specify all of the box, then underneath it, override it with an individual style. Heres a little fiddle of what I mean.
http://jsfiddle.net/XxWwn/
I think I see what you're trying to do here,
This is the only border shorthand I know, without using SASS/LESS.
.myclass {
border-color: red blue green coral;
border-width: 1px 2px 3px 4px;
border-style: solid;
}
This the same shorthand as margins and padding (TOP, RIGHT, BOTTOM, LEFT)
If you're setting all the borders to be the same, you can simply do something like border: 1px solid #DDD. Now, if I need to do only 3 of them, I'm forced to write each one out like border-left: 1px solid #DDD, border-top: 1px solid #DDD, etc. Is there a way I can combine them into one line? Something like border-{left,right,top}: 1px solid #DDD
The simplest two line option I have is to first set all borders and turn one of them off. But I reset all borders to zero at the start of the script, so this is kind of redundant.
3 lines
div {
border-color: red;
border-style: solid;
border-width: 1px 1px 1px 0;
}
2 lines
div {
border: 1px solid red;
border-left: 0;
}
See http://css-tricks.com/three-sided-border/
I guess there is no solution for this. The short hand technique for border attribute is not available to set multiple borders.
you can try this:
border: #ffffff solid;
border-width: 3px 2px 1px 0;