CSS Border-width

The border-width shorthand property sets all of the border widths in one declaration. This property can accept from one to four values.
If all four values are provided, the border widths are as specified.

border-width: <top> <right> <bottom> <left>

If three values are provided, right and left border widths are set as middle value.

border-width: <top> <right/left> <bottom>

If two values are provided, top and bottom border widths are set as the first value, right and left border widths are set as second value.

border-width: <top/bottom> <right/left>

If one value is provided, all four border width values are set the same.

border-width: <top/right/bottom/left>

Note: Always declare the border-style property before the border-width property. An element must have borders before the border width can be changed.

Property Values

Examples

This example sets the width of all four borders.

.border1 {
  border-style:solid; border-width:thin;
}
.border2 {
  border-style:solid; border-width:medium;
}
.border3 {
  border-style:solid; border-width:thick;
}
.border4 {
  border-style:solid; border-width:8px;
}

The Following is the result of the above example:

The border-top-width property sets the width of an element’s top border.
This property has the following syntax:

border-top-width: thin|medium|thick|length;

Note: Always declare the border-style property before the border-top-width property. An element must have borders before the width can be changed.

Examples

This example sets the width of all four borders.

.border1 {
  border-style:solid; border-width:thin; border-top-width:thin;
}
.border2 {
  border-style:solid; border-width:thin; border-top-width:medium;
}
.border3 {
  border-style:solid; border-width:thin; border-top-width:thick;
}
.border4 {
  border-style:solid; border-width:thin; border-top-width:8px;
}

The Following is the result of the above example:

The border-right-width property sets the width of an element’s right border.
This property has the following syntax:

border-right-width: thin|medium|thick|length;

Note: Always declare the border-style property before the border-right-width property. An element must have borders before the width can be changed.

Examples

This example sets the width of all four borders.

.border1 {
  border-style:solid; border-width:thin; border-right-width:thin;
}
.border2 {
  border-style:solid; border-width:thin; border-right-width:medium;
}
.border3 {
  border-style:solid; border-width:thin; border-right-width:thick;
}
.border4 {
  border-style:solid; border-width:thin; border-right-width:8px;
}

The Following is the result of the above example:

The border-bottom-width property sets the width of an element’s bottom border.
This property has the following syntax:

border-bottom-width: thin|medium|thick|length;

Note: Always declare the border-style property before the border-bottom-width property. An element must have borders before the width can be changed.

Examples

This example sets the width of all four borders.

.border1 {
  border-style:solid; border-width:thin; border-bottom-width:thin;
}
.border2 {
  border-style:solid; border-width:thin; border-bottom-width:medium;
}
.border3 {
  border-style:solid; border-width:thin; border-bottom-width:thick;
}
.border4 {
  border-style:solid; border-width:thin; border-bottom-width:8px;
}

The Following is the result of the above example:

The border-left-width property sets the width of an element’s left border.
This property has the following syntax:

border-left-width: thin|medium|thick|length;

Note: Always declare the border-style property before the border-left-width property. An element must have borders before the width can be changed.

Examples

This example sets the width of all four borders.

.border1 {
  border-style:solid; border-width:thin; border-left-width:thin;
}
.border2 {
  border-style:solid; border-width:thin; border-left-width:medium;
}
.border3 {
  border-style:solid; border-width:thin; border-left-width:thick;
}
.border4 {
  border-style:solid; border-width:thin; border-left-width:8px;
}

The Following is the result of the above example: