BlogsDope image BlogsDope

CSS border-width

Aug. 20, 2018 BORDER 885

The border-width property is used to set the width of the borders of an element. It is a shorthand property that sets the values of the four border properties - border-top-widthborder-right-widthborder-bottom-widthand border-left-width in a single declaration.

CSS

border-width: [border-top-width] [border-right-width] [border-bottom-width] [border-left-width];

Note that you must define the border-style property while giving the border-width value. This is because there is no border present by default. So in order to give a border width, you must first define a border using the border-style property.

Values

medium : Sets a medium width for the border. This is the default value.

thin : Sets a thin width for the border.

thick : Sets a thick width for the border.

<length> : Allows you to define the thickness of the border. Negative values are not allowed.

initial : Sets the default value.

inherit : Inherits the value from parent element.

You can give four or less than four values to the border-width property. The effect of each of these on border width is given below.

Giving four values

The first, second, third and fourth values define the top, right, bottom and left border widths respectively.

CSS

border-width: 2px 4px 6px 8px;

For the above declaration

  • top border width is 2px
  • right border width is 4px
  • bottom border width is 6px
  • left border width is 8px

Giving three values

The first and the third values define the top and the bottom border widths respectively. The second value defines the right and the left border widths.

CSS

border-width: 2px 4px 8px;

For the above declaration

  • top border width is 2px
  • right and left border widths are 4px
  • bottom border width is 8px

Giving two values

The first value defines the top and the bottom border widths. The second value defines the right and the left border widths.

CSS

border-width: 4px 8px;

For the above declaration

  • top and bottom border widths are 4px
  • right and left border widths are 8px

Giving one value

It defines all the four border widths.

CSS

border-width: 4px;

For the above declaration

  • border width of all the four sides is 4px

Examples

The following demo shows different declarations for giving border widths.

See the Pen border-width values by Aakhya Singh (@aakhya) on CodePen.

Another example is given below which shows the border widths for different values of the property.

See the Pen border-width examples by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported in all the major browsers.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).