CSS border Property
Description
The CSS border
property is used to define the styling of an element's border. It allows you to set the border's width, style, and color. You can specify these properties individually, such as border-width, border-style, and border-color, or use the shorthand border property to set them all at once in that order. This property is essential for controlling the visual appearance of elements on a webpage and plays a crucial role in web design and layout.
- Initial value
- See individual properties
- Applies to
- All elements
- Inherited
- No
- Computed value
- See individual properties
- Animatable
- See individual properties
- JavaScript syntax
- object.style.border
Syntax
border: <line-width> || <line-style> || <color>
Values
- <line-width>See border-width CSS property for values.
- <line-style>See border-style CSS property for values.
- <color>See border-color CSS property for values.
- inherit
Example
<div class="border">Example of the border property.</div>
.border {
margin: 20px;
padding: 20px;
border: 2px dashed blue;
}
Give it a Try
Click the button below to experiment with this property.
Browser Support
The following table will show you the current browser support for the CSS border
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1 | 3.5 | 1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 14 | 1 | 1 | 37 |
Last updated by CSSPortal on: 21st September 2023