CSS-kantbredd


Innehållsförteckning

    Visa innehållsförteckning


CSS-kantbredd

Egenskapen class="w3-codespan">border-width anger bredden på de fyra gränserna.

Bredden kan ställas in som en specifik storlek (i px, pt, cm, em, etc) eller genom att använda ett av de tre fördefinierade värdena: tunn, medium eller tjock:

Exempel

Demonstration av de olika kantbredderna:

p.one
{
   
border-style: solid;
   
border-width: 5px;
}

p.two
{
   
border-style: solid;
  border-width: medium;
}
p.three
{
   
border-style: dotted;
  border-width: 2px;
}

p.four
{
   
border-style: dotted;
    border-width: thick;
}

Resultat :

5px border-width
medium border-width
2px border-width
thick border-width

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

p.five {
  border-style: double;
  border-width: 15px;
}

p.six {
  border-style: double;
  border-width: thick;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone. 
Always specify the "border-style" property to set the borders first.</p>

</body>
</html>



Specifika sidobredder

class="w3-codespan">kantbredden egenskapen kan ha från ett till fyra värden (för den övre kanten, högerkanten, nedre kant och vänster kant):

Exempel

 p.one {
  border-style: solid;
  border-width: 5px 20px; /* 
  5px top and bottom, 20px on the sides */
}
p.two {
  border-style: 
  solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the 
  sides */
}
  
p.three {
  border-style: solid;
  border-width: 25px 10px 
  4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>

</body>
</html>