Grosimea conturului în CSS

CSS Outline Width (Lățimea conturului)

Cât de gros arată un contur depinde de proprietatea outline-width, care acceptă una dintre aceste valori:

thin — de obicei 1px.
medium — de obicei 3px.
thick — de obicei 5px.
o dimensiune aleasă de tine — în px, pt, cm, em etc.

Exemple CSS Outline Width

Contururile pot avea lățimi diferite, așa cum se vede aici.

Exemplu

Patru paragrafe, fiecare cu o altă lățime de contur: thin, medium, thick și 8px.

O pagină HTML care demonstrează diferite valori outline-width.

Într-un bloc `<style>` intern, dă paragrafelor padding, un contur solid verde, apoi patru clase cu outline-width thin, medium, thick și 8px. Adaugă un paragraf etichetat pentru fiecare.

> Rezultat: pagină HTML completă

Prompt

O pagină HTML care demonstrează diferite valori outline-width. Într-un bloc <style> intern, dă paragrafelor padding, un contur solid verde, apoi patru clase cu outline-width thin, medium, thick și 8px. Adaugă un paragraf etichetat pentru fiecare.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  padding: 5px;
  outline-style: solid;
  outline-color: green;
}

p.ex1 {
  outline-width: thin;
}

p.ex2 {
  outline-width: medium;
}

p.ex3 {
  outline-width: thick;
}

p.ex4 {
  outline-width: 8px;
}
</style>
</head>
<body>

<p class="ex1">A thin outline.</p>
<p class="ex2">A medium outline.</p>
<p class="ex3">A thick outline.</p>
<p class="ex4">An 8px thick outline.</p>

</body>
</html>