Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Which property specifies the width of a border in CSS?
In CSS, the ‘border’ property is used to apply the border to any HTML element, such as div. Also, we can set the different styles for the border, color, width, etc.
In this tutorial, we will learn different approaches to set the width of the border of the element. Also, we will learn to set the width of different sides of the element.
Use the border-width CSS property to set the width of the border
The ‘border-width’ CSS property is used to define the width of the border. Users can pass the four values to set the width of the different sides. However, the last three values are an option.
Using the single value as a border width applies the same border width for all four sides. If we pass two values, it considers the first value as a top and bottom border width and the second as a right and left border width.
Syntax
Users can follow the syntax below to use the ‘border-width’ CSS property to set the width of the border.
border-width: top right bottom left; border-width: top-bottom right-left; border-width: top-bottom-right-left;
In the above syntax, firstly, we define the different widths for all sides. After that, we define the different widths for top-bottom and right-left and then define the same border width for all sides.
Example
In the example below, we have created the div element and set the ‘5px’ border width for the border element. In the output, users can observe the red border with the dashed style.
<html>
<style>
div {
border-style: dashed;
border-width: 5px;
border-color: red;
width: 600px;
height: 100px;
}
</style>
<body>
<h3> Using the <i> border-width CSS property </i> to set the border width of the elemenet. </h3>
<div>
Welcome to the world of CSS.
</div>
</body>
</html>
Example
In the example below, we set the different border widths for all four sides of the element using the ‘border-width’ CSS property. We set the ‘5px’ width for the top border, ‘10px’ border width for the right border, ‘15px’ width for the bottom border, and ‘20px’ width for the border for the left border
In the output, users can observe the different border widths for every side of the div element.
<html>
<style>
div {
border-style: solid;
border-width: 5px 10px 15px 20px;
border-color: red;
width: 600px;
height: 200px;
padding: 10px;
}
</style>
<body>
<h3> Using the <i> border-width CSS property </i> to set the border width of the elemenet </h3>
<div>
<p> top border - 5px; </p>
<p> right border - 10px; </p>
<p> bottom border - 15px; </p>
<p> left border - 20px; </p>
</div>
</body>
</html>
Use the border CSS property to set the width of the border
The ‘border’ CSS property takes three values. The first value specifies the border width, the second value specifies the border style, and the third value specifies the border color.
Here, we will focus on the first value to set the border width.
Syntax
Users can follow the syntax below to set the border width using the ‘border’ CSS property.
border: 1rem solid blue;
Example
In the example below, the ‘1rem solid blue’ value of the ‘border’ CSS property set the border of 1rem width, red color, and solid style. To change the border width, we need to change the first value.
<html>
<style>
div {
border: 1rem solid blue;
width: 500px;
height: 200px;
padding: 10px;
}
</style>
<body>
<h3> Using the <i> border CSS property </i> to set the border width of the elemenet </h3>
<div>
You are on the TutorialsPoint website!
</div>
</body>
</html>
Example
In CSS, we can also use the ‘thin’, ‘medium’, and ‘thick’ values to set the border width. The ‘thin’ value is used to set the thin border, the ‘medium’ value sets more border width than the ‘thin’ border, and ‘thick’ sets the width more than ‘medium’.
In the example below, we have taken the three div elements and given different border widths using the ‘border’ CSS property which users can observe in the output.
<html>
<style>
p {
width: 200px;
height: 100px;
margin: 10px;
}
.first {
border: thin solid black;
}
.second {
border: medium solid black;
}
.third {
border: thick solid black;
}
</style>
<body>
<h3> Use the <i> border CSS property </i> to set the border width of the HTML element </h3>
<p class="first"> Thin border </p>
<p class="second"> Medium border </p>
<p class="third"> Thick border </p>
</body>
</html>
Set the border width of the particular side
The ‘border-top-width’ CSS property allows users to set the width of the top border. Furthermore, users can use the ‘border-right-width’, ‘border-bottom-width’, and ‘borderleft-width’ CSS properties are used to set the width of the right, bottom, and left border of the element, respectively.
Syntax
Users can follow the syntax below to set the border width of the different sides using the different CSS properties.
border-top-width: 3px; border-right-width: 6px; border-bottom-width: 9px; border-left-width: 12px;
Example
In the example below, we have created the four different div elements. We have set the top border width for the first div element, the right border width for the second div element, and the bottom and left border width for the third and fourth elements.
<html>
<style>
div {
width: 500px;
height: 100px;
margin: 10px;
}
.one {
border-top-width: 3px;
border-style: dotted;
border-color: red;
}
.two {
border-right-width: 6px;
border-style: solid;
border-color: green;
}
.three {
border-bottom-width: 9px;
border-style: dashed;
border-color: blue;
}
.four {
border-left-width: 12px;
border-style: double;
border-color: yellow;
}
</style>
<body>
<h2> Set the border width for the different sides of the element</h2>
<div class="one"> First div </div>
<div class="two"> Second div </div>
<div class="three"> Third div </div>
<div class="four"> Fourth div </div>
</body>
</html>
Conclusion
Users learned to set the border width of the HTML element using various CSS properties. We learned to use the ‘border-width’ and ‘border’ CSS properties to set the width of the border. Furthermore, we learned to set the different border widths for different sides of the element.
114 Views
