Formatarea aspectului unei pagini web – Chenare CSS

CSS pentru modelul casetei

Pentru a identifica mai bine unde se află conținutul nostru pe o pagină și pentru a semnifica faptul că este diferit de materialul din jurul acestuia, putem ajusta chenarele elementelor noastre. Chenarele pot fi activate sau dezactivate în partea de sus, de jos, din stânga și din dreapta elementului și pot avea, de asemenea, diferite stiluri cum ar fi linii solide, duble, canelate, punctate și întrerupte, printre altele.

Pentru a specifica un chenar complet, folosim pur și simplu border, la care putem aplica culoare, lățime și stil:

<style>
p.one {
    border-style:solid;
    border-width:5px;
}
p.two {
    border-style:groove;
    border-width:medium;
}
p.three {
    border-style:dotted;
    border-width:1px;
    border-color:red;
}
</style>
<p class="one">Un text.</p>
<p class="two">Mai mult text.</p>
<p class="three">Și mai mult text.</p>

Lista completă a stilurilor de chenar posibile este următoarea:

Tabelul 4 Stiluri de chenar

Valoare	Descriere
none	Fără chenar.
dotted	Chenar punctat.
dashed	Chenar întrerupt.
solid	Chenar solid.
double	Chenar dublu (două linii).
groove	Chenar 3d canelat.
ridge	Striat, margine 3D
inset	Chenar 3d coborât (cufundat).
outset	Chenar 3d înălțat.
inherit	Moștenește același stil ca și elementul părinte.

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu