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
Interactive Demo
The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.
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;
}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: 6th January 2024