Ce face border
Proprietatea scurtătură border combină grosimea (border-width), stilul (border-style) și culoarea (border-color).
Stilul este obligatoriu: dacă nu specifici un stil precum solid (linie continuă), dashed (linie punctată/întreruptă) sau dotted (puncte), bordura nu va apărea deloc pe ecran.
Poți aplica borduri pe laturi individuale cu border-top, border-right, border-bottom sau border-left.
Valori uzuale
| Valoare | Descriere |
|---|---|
solid |
Linie continuă simplă (cel mai folosit stil). |
dashed / dotted |
Linie întreruptă (cratime) sau din puncte. |
none |
Elimină complet bordura. |
grosime (px, rem) |
Lățimea liniei de bordură (ex. 1px, 2px). |
culoare |
Culoarea liniei în orice format (hex, rgb, etc.). |
Exemple
Exemplul 1: Card cu bordură fină și bară de accent în partea stângă
border-left poate avea o grosime și culoare diferită față de restul.
.card-informatie {
border: 1px solid #e2e8f0;
border-left: 4px solid #2563eb;
padding: 16px;
background-color: #ffffff;
}Efect vizual în browser
O casetă albă cu un chenar subțire gri pe trei laturi și o dungă verticală albastră mai groasă în stânga.Greșeli frecvente
- Omiterea stilului de bordură (scrierea border: 1px #000; este invalidă și nu afișează nimic; este obligatoriu să scrii border: 1px solid #000;).
Comenzi înrudite
border-radius: Rotunjește colțurile bordurii și ale fundalului unui element, transformând dreptunghiurile în căsuțe rotunjite sau cercuri.box-shadow: Aplică una sau mai multe umbre sub cutia unui element, adăugând adâncime și senzație de plutire (elevație).box-sizing: Stabilește dacă lățimea (width) și înălțimea (height) includ și spațierea interioară (padding) plus bordura (border).padding: Creează spațiu interior între conținutul elementului și bordura sa, preluând culoarea de fundal a elementului.