CSS border Property

The border property is a shorthand property used to specify the value of other longhand border properties at one place. You can use it to set the width, style and color of the top, right, bottom, and left border of a box at once. This property is only useful when you want all the borders to have the same width, color, and style.

Like all shorthand properties, a missing value for one of the longhand properties is set to the corresponding initial value. Also keep in mind that border-image, though not settable using this shorthand, will reset to its initial value, none.

The initial value of border property is equal to the concatenation of respective longhand properties. You can apply this property to all elements as well as ::first-letter. The property is not inheritable but you can animate the color and width of the borders.

Syntax

This is the formal syntax for using border property —

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

Here are some examples of using this property —

border: 3px;
border: 2px dotted;
border: 1px dashed orange;

Acceptable Values

<br-width>

This value specifies the width of the element’s border. You can refer to the border-width property for more details about possible values.

<br-style>

This value specifies the style of the element’s border. You can refer to the border-style property for more details about possible values.

<color>

This value specifies the color of the element’s border. If not set, its default value is the value of the element’s color property (the text color, not the background color). You can refer to the border-color property for more details about possible values.

Browser Support

The property works in all major browsers like Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top