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.

Give it a Try!

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