哪个属性指定CSS中边框的宽度

在CSS中，’border’属性用于为任何HTML元素（如div）应用边框。此外，我们还可以为边框设置不同的样式、颜色、宽度等。

在本教程中，我们将学习设置元素边框宽度的不同方法。同时，我们还会学习如何设置元素不同边的宽度。

使用border-width CSS属性设置边框的宽度

‘border-width’ CSS属性用于定义边框的宽度。用户可以传递四个值来设置不同边的宽度，但后三个值是可选的。

如果使用单个值作为边框宽度，则会将相同的边框宽度应用于四个边。如果传递两个值，第一个值被视为上下边框的宽度，第二个值被视为左右边框的宽度。

语法

用户可以按照下面的语法使用’border-width’ CSS属性来设置边框的宽度。

border-width: top right bottom left;
border-width: top-bottom right-left;
border-width: top-bottom-right-left;

在上面的语法中，首先，我们定义了所有边的不同宽度。然后，我们定义了上下和左右的不同宽度，然后定义了所有边的相同边框宽度。

示例1

在下面的示例中，我们创建了div元素，并为边框元素设置了’5px’的边框宽度。在输出中，用户可以看到带有虚线样式的红色边框。

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

示例2

在下面的示例中，我们使用CSS属性’border-width’为元素的四个边设置了不同的边框宽度。我们为顶部边框设置了’5px’宽度，为右边边框设置了’10px’边框宽度，为底部边框设置了’15px’宽度，为左边边框设置了’20px’宽度。

在输出中，用户可以观察到div元素每个边的不同边框宽度。

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

使用 border CSS 属性设置边框宽度

‘border’ CSS 属性包含三个值。第一个值用于指定边框宽度，第二个值用于指定边框样式，第三个值用于指定边框颜色。

这里，我们将专注于使用第一个值设置边框宽度。

语法

用户可以按照以下语法使用‘border’ CSS 属性来设置边框宽度。

border: 1rem solid blue;

示例3

在下面的示例中，“border” CSS属性的“1rem solid blue”值设置了1rem宽度、红色和实线样式的边框。要更改边框宽度，我们需要更改第一个值。

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

示例4

在CSS中，我们还可以使用“thin”、“medium”和“thick”值来设置边框宽度。使用“thin”值可以设置较窄的边框，使用“medium”值比“thin”边框设置更多的边框宽度，而“thick”值则比“medium”设置更宽。

在下面的示例中，我们取了三个div元素，并使用“border” CSS属性给它们赋予了不同的边框宽度，用户可以在输出中观察到这一点。

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

设置特定边框的宽度

‘border-top-width’ CSS属性允许用户设置顶部边框的宽度。此外，用户可以使用‘border-right-width’、‘border-bottom-width’和‘border-left-width’ CSS属性分别设置元素右边、底部和左边边框的宽度。

语法

用户可以按照以下语法，使用不同的CSS属性设置不同边框的宽度。

border-top-width: 3px;
border-right-width: 6px;
border-bottom-width: 9px;
border-left-width: 12px;

示例5

在下面的示例中，我们创建了四个不同的div元素。我们为第一个div元素设置了顶部边框宽度，为第二个div元素设置了右边边框宽度，为第三和第四个元素设置了底部和左边边框宽度。

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