Bordurile CSS sunt elemente esențiale în site-uri web, reprezentând marginile diferitelor componente și elemente. Bordurile CSS se referă la liniile care înconjoară elementele, definindu-le marginile. Marginile pot fi stilate, colorate și dimensionate folosind proprietăți CSS, cum ar fi stilul chenarului, culoarea chenarului, lățimea chenarului și raza chenarului. chenarele pot fi stilate cu chenarul de sus, chenarul din dreapta, chenarul de jos și chenarul din stânga.
În acest articol Borders in CSS, vom afla despre marginile CSS, acoperind opțiunile de stil, cazuri practice de utilizare și cele mai bune practici.
Cuprins
- Proprietăți de frontieră
- Modalități de a stila chenarul în CSS
- Stiluri comune de chenar
- Exemple de stil de bordura CSS
- Cazuri practice de utilizare
- Cazuri de utilizare CSS Borders
Proprietăți de frontieră
CSS oferă mai multe proprietăți pentru a personaliza chenarele:
- stil de bordura : determină tipul de chenar (de exemplu, plin, punctat, punctat).
- lățimea graniței : Setează lățimea chenarului (în pixeli, puncte sau alte unități).
- chenar-culoare : Specifică culoarea chenarului.
- hotar-raza : Creează colțuri rotunjite pentru elemente.
Modalități de a stila chenarul în CSS
The Proprietatea marginii CSS permite stilizarea marginii unui element prin setarea lățimii, stilului și culorii acestuia, permițând limite vizuale personalizabile în designul web.
1. Stil de chenar
- Proprietate stil CSS border-top
- border-right-style Proprietate
- border-bottom-style Proprietate
- border-left-style Proprietate
2. Lățimea chenarului
- Proprietate border-top-width
- Proprietate border-right-width
- Proprietate border-bottom-width
- Proprietate border-left-width
3. Culoarea chenarului
- border-top-color Proprietate
- proprietate border-right-color
- border-bottom-color Proprietate
- proprietate border-left-color
4. Delimitați părțile individuale
5. Proprietatea razei frontierei
Stiluri comune de chenar
Proprietatea border-style specifică tipul de chenar. Niciuna dintre celelalte proprietăți de chenar nu va funcționa fără a seta stilul de chenar.
Următoarele sunt tipurile de granițe:
- Punctat : creează o serie de puncte.
- întreruptă : Formează o linie întreruptă.
- Solid : Produce o linie continuă.
- Dubla : Redă două linii paralele.
- Canelură și creastă : Creați efecte 3D canelate și crestate.
- Medalion și Început : Adăugați chenare 3D în interior și la început.
- Nici unul : Îndepărtează chenarul.
- Ascuns : Ascunde chenarul.
Exemple a stilului de bordura CSS
În acest exemplu vom folosi proprietatea CSS în stilul marginii.
HTML