CSS Border Width
The CSS Border width properties used for setting the width all four sides of an element of div column, you can set the width one side, two side and three sides of an element.
Every sides width sets individually using CSS-
border-right-width,border-left-widthborder-bottom-widthborder-top-widthborder-block-start-widthborder-block-end-widthborder-inline-start-width and.border-inline-end-width
Example-
|
1 2 3 4 5 |
border-width: solid; border-width: 0 7px 11px 15px; border-width: 1.5em; border-width: 1ex 1.50ex 1.25ex; border-width: 6px 2.25em; |
therefore, when you will take the value of this property could be either a length in cm, px or ct or it should be set the value thick, thin or medium.
let us see the example run the following code to set the border width with CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> </head> <body> <p style = "border-style:solid; border-width:7px;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p style = "border-style:dashed; border-width:7pt;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </body> </html> |
Set border to half width
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .box{width:500px;} .box hr { width: 500px; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;} </style> </head> <body> <div class="box"> <hr> <p>Generate Lorem Ipsum placeholder text for use in your graphic, print and web layouts, and discover plugins for your favorite writing, design and blogging tools.</p> <hr> </div> </body> </html> |
In web HTML pages when web designer design the pages use the width properties to set the with and also use the CSS border width properties, which set the border all side in div or container and section, according to need you can set the border properties top, bottom, left, right sides and can be use value in px, percentage(%) or em.
border style width set in dotted, dashed, solid, thin, and this value use as border-style-width values to decorate the border.
About Author
