In CSS, the "border" property is used to apply a border to any HTML element, such as a div. In addition, we can also set different borders, colors, widths and other styles.
In this tutorial, we will learn different ways to set the border width of an element. Additionally, we will learn to set the width of different sides of an element.
The "border-width" CSS property is used to define the width of the border. Users can set the width of different sides through these four values. However, the last three values are an option.
Using a single value as the border width will apply the same border width to all four sides. If we pass two values, it will treat the first value as the top and bottom border width and the second value as the left and right border width.
Users can use the "border-width" CSS property to set the width of the border according to the following syntax.
border-width: top right bottom left; border-width: top-bottom right-left; border-width: top-bottom-right-left;
In the above syntax, first, we define different widths for all sides. After that, we define different widths for top, bottom and left and right, and then define the same border width for all sides.
In the example below, we create a div element and set a "5px" border width to the border element. In the output, the user can observe a dashed style red border.
<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>
In the example below, we use the "border-width" CSS property to set different border widths for all four sides of the element. We set a "5px" width for the top border, a "10px" width for the right border, a "15px" width for the bottom border, and a "20px" width for the left border
In the output, the user can observe the different border widths on each 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>
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 that sets the border width.
Users can set the border width using the "border" CSS property according to the following syntax.
border: 1rem solid blue;
In the example below, the "1rem Solid blue" value of the "border" CSS property sets a border of 1rem width, red, and solid color styles. 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>
In CSS, we can also use the "thin", "medium" and "thick" values to set the border width. The 'thin' value sets a thin border, the 'medium' value sets a wider border width than the 'thin' border, and the 'thick' value sets a wider width than 'medium'.
In the example below, we have taken three div elements and given different border widths using the "border" CSS property that the user 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>
The "border-top-width" CSS property allows the user to set the width of the top border. In addition, users can use the "border-right-width", "border-bottom-width" and "borderleft-width" CSS properties to set the width of the element's right border, bottom border and left border respectively.
Users can use different CSS properties to set the border width of different sides according to the following syntax.
border-top-width: 3px; border-right-width: 6px; border-bottom-width: 9px; border-left-width: 12px;
In the example below, we create four different div elements. We 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 widths 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>
Users learned to use various CSS properties to set the border width of HTML elements. We learned to use the "border-width" and "border" CSS properties to set the width of the border. Additionally, we learned to set different border widths for different sides of the element.
The above is the detailed content of Which property in CSS specifies the width of a border?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
