html

border-width Property in CSS

Building an eye catchy website is not an easy task, a developer has to try multiple things to create an attractive website like different backgrounds, styles, borders, etc.

CSS border can be used around the content to enhance the content’s appearance. The border properties allow us to determine the border area of an element(s). A border can be specified with multiple styles like a solid line, dashes, etc.

This write-up will provide a comprehensive overview of the border-width property. Initially, it elaborates how predefined values work with the border-width property. And afterward, it demonstrates the working of border-width property using some specified values.

Border-width property

Border-width property determines the width of an element’s border. It specifies the border’s width in all four directions i.e. top, bottom, right, and left. Every value assigned to the border-width property will be specified to all sides.

Syntax
The syntax of border-width property is described in the below-given snippet:

border-width: size;

The width size can be specified using some predefined values like thick, thin, medium, or in the form of pixels, points, centimeters, etc.

Let’s consider some examples to have a profound understanding of border-width property in CSS.

How to assign border-width using predefined values

In CSS we can specify the size of the border using the predefined values such as thick, thin, medium.

Example
The below-given piece of code sets the border size of <h1>, and <p> element using predefined values:

CSS

h1{
    border-style: solid;
    border-width: thick;
}
p{
    border-style: solid;
    border-width: medium;
}

HTML

<h1>Border Width using Predefined Values</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>

It will produce the following output:

How to add border-width using specific values

In CSS, we can assign a specific size to set the border’s width (i.e. px, cm, etc.).

Example
Following code sets the border width of <p> element in px and border width of <h1> in cm:

CSS

h1{
    border-style: solid;
    border-width: 0.1cm;
}
p{
    border-style: solid;
    border-width: 1px;
}

HTML

<h1>Border Width using Predefined Values</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>

We will get the following output for the above code:

How to assign specific side widths

In CSS, specific side widths can be assign to the border width property. By default the border width property sets the equal border’s width to all four sides. However we can specify each side’s width in top, right, bottom, and left order.

Example
This example assign four values to the background-width property first one for the top border, second one for the right border, third one for bottom and the last one for the left border:

CSS

h1{
    border-style: solid;
    border-width: 0.3cm 0.2cm 0.1 0.2;
}
p{
    border-style: solid;
    border-width: 3px 2px 1px 1px;
}

HMTL

<h1>Border Width using Predefined Values</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>

The above code will produce the following output:

Example 2
This example assign two values to the background-width property:

  • first value specifies the size for top and bottom
  • second value specifies the size for the left and right side

CSS

h1{
    border-style: solid;
    border-width: 0.2cm 0.1cm;
}
p{
    border-style: solid;
    border-width: 2px 1px;
}

HTML

<h1>Border Width using Predefined Values</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>

The above given code shows the following output:

A clear difference in the (top, bottom) and (left, right) sides can be noted in the output.

Conclusion

The border-width property sets all four borders of an element. If border-width property has one value then it will set the same border to all four sides. In case of two values, the first value refers to the “Top and Bottom”, and second refers to the “Left and Right” borders. If there are three values, first refers to the top border, second refers to left and right border, while the third one refers to the bottom border. If there are four values then the order will rotate in clockwise rotation i.e. top, right, bottom, left.

This article presented a guideline to set the border-width using predefined values, and specified values. Afterwards this write-up explained how to set a unique border size for each side.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.