Which property in CSS specifies the width of a border?

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.

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 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.

grammar

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.

Example

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.

   
 Using the  border-width CSS property  to set the border width of the elemenet. 
 
 Welcome to the world of CSS. 
  

Example

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.

   
 Using the  border-width CSS property  to set the border width of the elemenet 
 
 
 top border - 5px; 
 
 right border - 10px; 
 
 bottom border - 15px; 
 
 left border - 20px; 
 
  

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 that sets the border width.

grammar

Users can set the border width using the "border" CSS property according to the following syntax.

border: 1rem solid blue;

Example

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.

   
 Using the  border CSS property  to set the border width of the elemenet 
 
 You are on the TutorialsPoint website! 
  

Example

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.

   
 Use the  border CSS property  to set the border width of the HTML element 
 
 Thin border 
 
 Medium border 
 
 Thick border 
  

Set the border width of a specific side

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.

grammar

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;

Example

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.

   
 Set the border width for the different sides of the element
 
 First div 
 
 Second div 
 
 Third div 
 
 Fourth div 
  

Conclusion

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!