CSS border-width Property

The border-width property sets the width of the border.

The width is set as a pixel value, or as thin, medium, or thick.

Example

#

A thin border-width.

Element with a thin border
<style>
  .border-thin {
    padding: 20px;
    border-style: solid;
    border-color: tomato;
    border-width: thin;
  }
</style>

<div class="border-thin">
  Element with a thin border
</div>

Using border-width

The border-width property accepts one to four values for the top, right, bottom, and left sides respectively.

The default border size is medium or 1 pixel.

Note: A border-style is required for a border to display.

Syntax

border-width: medium | thin | thick |
length | initial | inherit;

Values

#

Value Description
medium Default. Medium border
thin Thin border
thick Thick border
length Sets border thickness using CSS units
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-width values.

border-width: thick
<style>
  .border-example {
    padding: 20px;
    border-style: solid;
    border-color: firebrick;
    border-width: thick;
  }
</style>

<div class="border-example">
  border-width: thick
</div>

Click the buttons to see different border sizes applied to each side of the element.

border-width: thin thick
<style>
  .border-example-multiple {
    padding: 15px;
    border-style: solid;
    border-color: tomato;
    border-width: thin thick;
  }
</style>

<div class="border-example-multiple">
  border-width: thin thick
</div>

Code Explanation

Each border side can have a different size; values are assigned like so:

  • Single value: all four sides of the element
  • Two values: top and bottom, left and right sides
  • Three values: top, left and right, and bottom sides
  • Four values: top, right, bottom, and left sides respectively

Browser support

This table shows when border-width support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides