CSS Borders. CSS Border - Individual Sides. Proprietatea border-style.

CSS Border - Individual Sides

Din exemplele de mai sus, ați văzut că este posibil să specificați o frontieră diferită pentru fiecare parte.
În CSS, există, de asemenea, proprietăți pentru specificarea fiecărui chenar (sus, dreapta, jos și stânga/top, right, bottom, left):



Exemplu:

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Exemplul de mai sus dă același rezultat ca acesta:

Exemplu:

p {
  border-style: dotted solid;
}

Iată, deci, cum funcționează:

Dacă proprietatea border-style are patru valori:

border-style: punctat dublu punctat solid.

• top border este punctat.
• right border este solid.
• bottom border este dublu.
• left border este punctat.

Dacă proprietatea border-style are trei valori:

border-style: dublu solid punctat.

• top border este punctat.
• right și left borders sunt solide.
• bottom border este dublu.

Dacă proprietatea border-style are două valori:

border-style: solid punctat.

• top și bottom borders sunt punctate.
• right și left borders sunt solide.

Dacă proprietatea border-style are o valoare:

border-style: punctat.

• toate cele patru granițe sunt punctate.

Proprietatea border-style este folosită în exemplul de mai sus. Cu toate acestea, funcționează, de asemenea, cu border-width și border-color.