Shorthand to set the 3 properties:
element { border-bottom: Border-bottom-width Border-bottom-style Border-bottom-color ;}
This shorthand is equivalent to the following:
element { border-bottom-width: thin | medium | thick | length | inherit ; border-bottom-style: style ; border-bottom-color: color ; }
Alternatively you can choose to inherit from a parent element: border-bottom: inherit ;
The Border-Style property must be set for the Border-Width or Border-Color properties to have any effect.
The default property values, any value that is not specified in the shorthand will be set to the default.
border-bottom-width: medium; border-bottom-style: none; border-bottom-color: 0;
Examples
Set the bottom border of H1 to a 2px dashed green line:
h1 {border-bottom: 2px dashed green;}
Set a large bottom border on a 0px element to create an upward pointing triangle:
.down-arr {
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid black;
}
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. |
Browser Support: All major browsers (CSS 1)
“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-bottom - MDN Web Docs.
border-left - Shorthand to set all the border-left properties.
border-right - Shorthand to set all the border-right properties.
border-top - Shorthand to set all the border-top properties.
border - Shorthand to set all the border properties.