CSS border-style Property
Description
The border-style
property specifies the border style of an element. Used as a shortcut to determine the entire border style in one rule.
- Initial value
- See individual properties
- Applies to
- All elements
- Inherited
- No
- Media
- Visual
- Computed value
- See individual properties
- Animatable
- No
- CSS Version
- CSS1, CSS2, CSS3
- JavaScript syntax
- object.style.borderStyle
Syntax
border-style: <line-style>{1,4}
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-style property using a purple dashed border 2px in width.</div>
.border {
border-style: dashed;
border-width: 2px;
border-color: purple;
margin: 20px;
padding: 20px;
}
Give it a Try
Click the button below to experiment with this property.
Browser Support
Desktop | |||||
4 | 12 | 1 | 1 | 3.5 | 1 |
Tablets / Mobile | |||||
![]() |
|||||
3 | 18 | 4 | 14 | 3 | 1.0 |
Last updated by CSSPortal on: 12th October 2019