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,
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.
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;
This value specifies the width of the element’s border. You can refer to the border-width property for more details about possible values.
This value specifies the style of the element’s border. You can refer to the border-style property for more details about possible values.
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.
The property works in all major browsers like Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.
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.