CSS border Property


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
Computed value
See individual properties
See individual properties
JavaScript syntax

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.


border: <line-width> || <line-style> || <color>



<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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 6th January 2024