totn CSS

CSS: border-width property

This CSS tutorial explains how to use the CSS property called border-width with syntax and examples.

Description

The CSS border-width property defines the border width of a box.

Syntax

The CSS border-width property can be expressed with one, two, three or four values provided.

Syntax - One Value

The syntax for the CSS border-width property (with 1 value) is:

border-width: all;

When one single value is provided, the border-width value will apply to all four sides of the box (ie: top, right, bottom, left).

Syntax - Two Values

The syntax for the CSS border-width property (with 2 values) is:

border-width: top_bottom left_right;

When two values are provided, the first value will apply to the top and bottom of the box. The second value will apply to the left and right sides of the box.

Syntax - Three Values

The syntax for the CSS border-width property (with 3 values) is:

border-width: top right_left bottom;

When three values are provided, the first value will apply to the top of the box. The second value will apply to the right and left sides of the box. The third value will apply to the bottom of the box.

Syntax - Four Values

The syntax for the CSS border-width property (with 4 values) is:

border-width: top right bottom left;

When four values are provided, the first value will apply to the top of the box. The second value will apply to the right side of the box. The third value will apply to the bottom of the box. The fourth value will apply to the left side of the box.

The top, right, bottom, and left padding values can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
div { border-width: 2px; }
div { border-width: 1em 1px; }
div { border-width: 2px 5px 4px; }
div { border-width: 4px 0 2px 3px; }
thin Thin border width, which might be 1px or 2px depending on the browser
div { border-width: thin; }
medium Medium border width, which might be 3px or 4px depending on the browser
div { border-width: medium; }
thick Thick border width, which might be 5px or 6px depending on the browser
div { border-width: thick; }

Note

  • You can combine thin, medium, thick, and fixed values in the CSS border-width property.
  • See also the border, border-color, and border-style properties.

Browser Compatibility

The CSS border-width property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the border-width property below, exploring examples of how to use this property in CSS with 1, 2, 3, or 4 values.

div { border-width: 2px; }

In this CSS border-width example, we have provided one value of 2px which would apply to all 4 sides of the box.

Next, we'll look at a CSS border-width example where we provide two values.

div { border-width: 5px medium; }

In this CSS border-width example, we have provided two values. The first value of 5px would apply to the top and bottom of the box. The second value of medium would apply to the left and right sides of the box.

Next, we'll look at a CSS border-width example where we provide three values.

div { border-width: 5px thin 10px; }

In this CSS border-width example, we have provided three values. The first value of 5px would apply to the top of the box. The second value of thin would apply to the right and left sides of the box. The third value of 10px would apply to the bottom of the box.

Next, we'll look at a CSS border-width example where we provide four values.

div { border-width: thick 10px 12px 0; }

In this CSS border-width example, we have provided four values. The first value of thick would apply to the top of the element. The second value of 10px would apply to the right side of the box. The third value of 12px would apply to the bottom of the box. The fourth value of 0 would apply to the left side of the box.

Share on: