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

Value Description
thin Sets a thin border
medium (default) Sets a medium border
thick Sets a thick border
length Sets the thickness of the border
inherit1 Specifies that the value of the property should be inherited from the parent element

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:

border-width:thin
border-width:medium
border-width:thick
border-width:8px

border-top-width

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:

border-width:thin
border-width:medium
border-width:thick
border-width:8px

Border-right-width

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:

border-width:thin
border-width:medium
border-width:thick
border-width:8px

Border-bottom-width

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:

border-width:thin
border-width:medium
border-width:thick
border-width:8px

Border-left-width

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:

border-width:thin
border-width:medium
border-width:thick
border-width:8px



					

Aly Chiman

Aly Chiman is a Blogger & Reporter at AlyChiTech.com which covers a wide variety of topics from local news from digital world fashion and beauty . AlyChiTech covers the top notch content from the around the world covering a wide variety of topics. Aly is currently studying BS Mass Communication at University.

Leave a Reply

Your email address will not be published.