Tips on Border CSS Styling: Learn CSS Border Shorthand

Defining border in CSS

The CSS border property allows you to define a line border for an element:

Example

h1 {
   border: 5px solid red;
}
a {
   border: 2px solid green; 
}

It is actually a shorthand for three CSS line border subproperties:

To define a line border in CSS, follow the syntax example below:

border: width style color;

The available values will be explained in the following section.

Value	Description	Defined in	Default value
width	CSS border width	Length units or keywords (`thin`, `medium`, `thick`)	`medium`
style	CSS border style	Keywords (`none`, `solid`, `hidden`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`)	`none`
color	CSS border color	Color names, RGB, RGBA, HEX, HSL or HSLA values.	`currentcolor`

Note: you don't need to define all of the subproperties for line borders necessarily. The order is also not important.

12+

3.5+

18+