How can I make border-left the same height as border-right? In other words, how to change the order of the borders? Border-left is taller than border-right. Which results in a 1px "gap".
.tab-header > ul > li
{
display: inline-block;
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
border-top: 1px solid #cecece;
padding: 8px;
font-size: 10px;
text-transform: uppercase;
}
What is happening, is that the css tries to make a nice diagonal colour change in the border. If you change all the 1px to 10px, you see the problem. (Image, see: http://jsfiddle.net/DaTCy/1/)
If you are using 1px widths of the borders, the bottom and the right border will always overlap in the bottom-right pixel.
EDIT: As a solution, you can try giving the bottom border a width of 0px, and solving the height problem in the container you put the button in.
The simplest solution is to explicitly use:
border-bottom-width: 0;
JS Fiddle demo.
Use border-left/-top/-right and border-bottom for different [nested] elements.
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;
}
I have a table with rounded corners on the bottom, created with:
border-bottom-left-radius:pixel;
and same for the right bottom.
When I add:
bottom-border-dotted;
border-bottom-color:white;
the dotted white border appears correctly (rounded), but the table bottom reverts back to a rectangle. I have a solid background color in this table. When I replace" bottom-border-dotted, with border-bottom-solid, with the same white color everything is fine.
I just love the dotted border, especially at Christmas.
I think you have some errors in the CSS. F.e.: bottom-border-dotted; is not valid CSS. You should use border-bottom: 3px dotted black; or border-bottom-style: dotted;.
Try this example (see JSFiddle)
HTML
<div></div>
CSS
div {
display: inline-block;
width: 300px;
height: 300px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: solid 3px black;
background-color: #cccccc;
border-bottom: 3px dotted black;
}
Result
Above code will create something like this:
I would like to bold the border of a div.
My problem is that i need to bold only the top and bottom borders.
For example: if i have a div as a shape of a square it should look:
_______________
_______________
How can i do it in css?
In CSS
border-top:3px solid #000;
border-bottom:3px solid #000;
and then if you want borders on left and right just make them 1 px instead of 3
Set the width of the bottom and top borders higher.
#element {
border-top: 5px solid #000;
border-bottom: 5px solid #000;
}
Try:
border: 2px 0px 2px 0px #000;
Edit:
Quick explanation of border shorthand properties. The order of elements is width style color, where the width is in the order of Top Left Bottom Right. So in the above example it will set the top and bottom borders to 2px with the left and right being 0px. It will default the style of the border to solid and the color will be black. To create a dashed border on the left and right instead you would use:
border: 0px 2px 0px 2px dashed #000;
You can do it with:
border-top: 1px solid black;
border-bottom: 1px solid black;
Try something like:
border-top: 2px solid black;
border-bottom: 2px solid black;
For more info, see https://developer.mozilla.org/en-US/docs/CSS/border-top and https://developer.mozilla.org/en-US/docs/CSS/border-bottom.
.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)