Shorthand to set the top, right, bottom and left border properties in px, pt, %, em, etc.
element { border-width: TopWidth RightWidth BottomWidth LeftWidth ;} element { border-width: TopWidth Right&LeftWidth BottomWidth ;} element { border-width: Top&BottomWidth Right&LeftWidth ;} element { border-width: Width ;}
Alternatively you can choose to inherit from a parent element: border-width: inherit ;
This shorthand is equivalent to the following:
element { border-top-width: thin | medium | thick | length | inherit ; border-right-width: thin | medium | thick | length | inherit ; border-bottom-width: thin | medium | thick | length | inherit ; border-left-width:thin | medium | thick | length | inherit ; }
The default border width is medium. For dashed borders the border-width will change the size of each dash.
Examples
Set the border widths to 3px and 8px:
h1 {border-width: 3px 8px;}
Try it:
This is a sample of text with a CSS border. Each of the 4 borders can be styled together or separately with CSS. |
(CSS 1) Browser Support: All major browsers.
“I've learned that our background and circumstances may have influenced who we are, but we are responsible for who we become” ~ James Rhinehart
Related:
border-width - MDN Web Docs.
border-style - Style of the four borders.
border-color - Color of the four borders.
border - Shorthand to set all border properties.
outline-width - Width of an outline.
The CSS Box Model