CSS border-bottom-style Property
Description
The border-bottom-style
is a CSS property that controls the style of the bottom border of an element. It allows web developers to define the visual appearance of the line that appears beneath an element, such as a text header or a div. This property can take various values, including "solid" for a continuous line, "dashed" for a dashed line, "dotted" for a dotted line, and others, enabling designers to customize the border's appearance to match the overall design and aesthetics of a webpage. It's a part of the broader CSS border properties used to manipulate an element's borders, including its width and color.
- Initial value
- none
- Applies to
- All elements
- Inherited
- No
- Computed value
- Specified value
- Animatable
- No
- JavaScript syntax
- object.style.borderBottomStyle
Interactive Demo
Syntax
border-bottom-style: <line-style>
Values
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset- noneBorder is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn.
- hiddenSame as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.
- dottedA series of round dots.
- dashedA series of square-ended dashes.
- solidA single line segment.
- doubleTwo parallel solid lines with some space between them.
- grooveDisplays a border leading to a carved effect. It is the opposite of ridge.
- ridgeLooks as if it were coming out of the canvas.
- insetLooks as if the content on the inside of the border is sunken into the canvas.
- outsetLooks as if the content on the inside of the border is coming out of the canvas.
- inherit
Example
<div class="border">This is an example of the border-bottom-style property using a red solid border 3px in width.</div>
.border {
border: 1px solid blue;
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: red;
margin: 20px;
padding: 20px;
}
Browser Support
The following table will show you the current browser support for the CSS border-bottom-style
property.
Desktop | |||||
12 | 1 | 1 | 9.2 | 1 |
Tablets / Mobile | |||||
18 | 4 | 14 | 1 | 1 | 37 |
Last updated by CSSPortal on: 31st December 2023