CSS border

The CSS border property is shorthand for setting all styles on the borders of an element.

The border property is a shorthand property for the border-width, border-style, and border-color properties.

If you need to apply a different style to each border, you will need to use one of the other, more specific, border properties (for example, border-top, border-top-color, border-style, etc)

Syntax

Where

And

These values are explained below.

Possible Values

line-width

This sets the border-width property. Possible values are:

thin
Specifies a thin border. It is up to the user agent to determine the actual width.
medium
Specifies a medium width border. It is up to the user agent to determine the actual width.
thick
Specifies a thick border. It is up to the user agent to determine the actual width.
length
Specifies the width of the border using a length value. For example, 10px, 1em, 8pt etc
line-style

This sets the border-style property. Possible values are:

none

No border. Color and width are ignored. Therefore, the border's width is 0, and the initial value of border-image-width will also resolve to zero.

hidden
Same as none, but in the collapsing border model (border-collapsed tables), also inhibits any other border. In other words, when multiple edges come together with different border settings (for example, a table and a td, each with their own border settings), if any one of those is hidden, it will prevent any border at that edge. This is different to none, in that all elements meeting that edge must have none before the border is omitted.
dotted
A series of round dots.
dashed
A series of square-ended dashes.
solid
A single line segment.
double
Two parallel solid lines with some space between them. When using this value, the border-width value determines the sum of the lines and the space between them.
groove
Looks as if it were carved in the canvas.
ridge
Looks as if it were coming out of the canvas.
inset
Looks as if the content on the inside of the border is sunken into the canvas. Treated as ridge in the collapsing border model.
outset
Looks as if the content on the inside of the border is coming out of the canvas. Treated as groove in the collapsing border model.
color

This sets the border-color property, which specifies the color of the border. It must be a valid color.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value
This is based on the individual properties' values. Their initial values are as follows:
border-width
medium
border-style
none
border-color
Uses the currentColor value (which is the value of the color property).
Applies To
All elements.
Inherited?
No
Media
Visual
Animatable
Yes, as the individual properties (see example)

Example Code

Official Specifications