Chenare CSS
Chenarul unui element are un stil, o grosime și o culoare, iar proprietățile CSS pentru chenar le controlează pe toate trei.
Stilul chenarului CSS
Tipul de chenar care apare este decis de border-style.
Acceptă aceste valori:
dotted— un chenar format din puncte.dashed— un chenar format din liniuțe.solid— o singură linie continuă.double— o linie dublă.groove— un aspect 3D de șanț, care variază în funcție de culoarea chenarului.ridge— un aspect 3D de muchie, care variază în funcție de culoarea chenarului.inset— un aspect 3D în adâncime, care variază în funcție de culoarea chenarului.outset— un aspect 3D în relief, care variază în funcție de culoarea chenarului.none— niciun chenar.hidden— chenarul este ascuns.
Îi poți da lui border-style de la una la patru valori, pentru chenarele de sus, dreapta, jos și stânga.
Notă: Până când nu este setată border-style, celelalte proprietăți de chenar nu au niciun efect.
Exemplu
Fiecare paragraf de mai jos își are propriul stil de chenar.
Prompt
O pagină HTML care demonstrează toate valorile CSS pentru border-style.
Într-un bloc
<style> intern, creează clase de paragraf pentru fiecare stil: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden și una mixtă (dotted dashed solid double). Adaugă un paragraf pentru fiecare, astfel încât fiecare stil de chenar să fie afișat.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border. The effect depends on the border-color value.</p>
<p class="ridge">A ridge border. The effect depends on the border-color value.</p>
<p class="inset">An inset border. The effect depends on the border-color value.</p>
<p class="outset">An outset border. The effect depends on the border-color value.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>