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.
Related
How can i do so.
I want to change the color of div's only bottom side.
I tried border: 1px solid green
Try this:
div{
border-bottom: 1px solid green;
}
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 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 have the following CSS code:-
border:5px solid grey !important;
which will apply the style setting to all the border four dimensions upper,lower,right & left. but how i can define the boarder to only applied to the upper,right & left . without having to define separate style for each ?
Thanks
You can try,
border:5px solid grey;
border-bottom:0px;
You can define to all dimensions border and then redefine border for bottom:
border:5px solid grey !important;
border-bottom:5px solid transparent !important;
Also you can set bottom border to none or 0 (these means that element will not have bottom border).
P.S. AS you use !important in defining border, you need to use it also in redefinision of border.
JSFiddle
No. This is not possible with this border:5px solid grey !important; shorthand methodology.
You need to declare them in the way as mentioned below to achieve what you are looking for.
WORKING DEMO
The HTML:
<div>ABCD</div>
The CSS:
div{border-width: 5px 5px 0px 5px; border-style: solid; border-color: grey;}
FURTHER REFERENCE
Hope this helps.
border-right:5px solid grey !important;
border-top:5px solid grey !important;
border-left:5px solid grey !important;
or another shorter way:
border:5px solid grey !important;
border-bottom: 0 !important;
or you can utilize box-shadow:
box-shadow:
inset 5px 0 0 red, /* LEFT */
inset 0 0px 0 blue, /* BOTTOM */
inset 0 5px 0 green, /* TOP */
inset -5px 0 0 yellow; /* RIGHT */
Fiddle is here
You can use border-bottom:
border:5px solid grey;
border-bottom:none;
Just specify the area you want border on that line of code itself like this.
border: solid grey!important;
border-width:5px 5px 0 5px!important;
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.