Lățimea Bordurii CSS
Proprietatea border-width setează lățimea celor patru borduri.
Poți da o dimensiune specifică (în px, pt, cm, em, și așa mai departe) sau poți folosi una din cele trei valori prestabilite: thin, medium, sau thick.
Exemplu
Fiecare paragraf folosește o lățime de bordură diferită.
Prompt
O pagină HTML care demonstrează diferite valori border-width.
Într-un bloc intern
<style>, creează patru clase de paragraf: solid 5px, solid medium, punctat 2px și punctat thick. Fiecare trebuie să seteze și border-style. Adaugă un paragraf pentru fiecare, etichetând lățimea folosită.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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;
}
</style>
</head>
<body>
<p class="one">5px border-width</p>
<p class="two">medium border-width</p>
<p class="three">2px border-width</p>
<p class="four">thick border-width</p>
</body>
</html>
Lățimi Specifice pe Laturi
Proprietatea border-width poate lua de la una la patru valori, pentru bordurile de sus, dreapta, jos și stânga.
Exemplu
Două valori setează sus/jos și laturile, în timp ce patru valori setează fiecare latură separat.
Prompt
O pagină HTML care arată cum border-width poate lua de la una la patru valori pentru cele patru laturi.
Într-un bloc intern
<style>, creează trei clase de paragraf cu bordură solidă: una cu "5px 20px", una cu "20px 5px" și una cu "25px 10px 4px 35px". Adaugă un paragraf pentru fiecare.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<p class="one">5px top and bottom, 20px on the sides.</p>
<p class="two">20px top and bottom, 5px on the sides.</p>
<p class="three">25px top, 10px right, 4px bottom, 35px left.</p>
</body>
</html>