Obrobe omogočajo, da določimo slog, širino in barvo elementa, katere lastnosti določajo mejo elementov. Dovoljene
so štiri vrednosti, te so določitev zgornje, spodnje, desne in leve obrobe. V praksi je to tista obroba, ki je okrog
HTML elementa. Lastnost border-style ima štiri vrednosti, trdno (solid), črtkano (dashed), pikčasto
(dotted) in dvojno (double), pomeni, da bo zgornja obroba trdna, spodnja dvojna, desna črtkana, in leva pikčasta. Če
ima obroba dve ali tri vrednosti, določimo eno ali več vrednost dvema lastnostnima top-style: solid,
bottom-style: solid in podobno.
| Lastnost | Primer | Opis |
|---|---|---|
| Osnovne lastnosti | ||
border | border: 2px solid red; |
Skrajšana lastnost (shorthand) za postavitev širine, sloga in barve hkrati |
border-width | border-width: 2px; |
Določi širino vseh štirih robov (top, right, bottom, left) |
border-style | border-style: solid; |
Določi slog roba (solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden) |
border-color | border-color: red; |
Določi barvo vseh štirih robov |
| Posamezne strani (Top, Right, Bottom, Left) | ||
border-top | border-top: 1px solid black; |
Postavi zgornji rob (širina, slog, barva) |
border-right | border-right: 2px dashed blue; |
Postavi desni rob |
border-bottom | border-bottom: 3px dotted green; |
Postavi spodnji rob |
border-left | border-left: 1px solid red; |
Postavi levi rob |
| Posamezne lastnosti po straneh | ||
border-top-width | border-top-width: 2px; |
Samo širina zgornjega roba |
border-top-style | border-top-style: dashed; |
Samo slog zgornjega roba |
border-top-color | border-top-color: red; |
Samo barva zgornjega roba |
| Zaobljeni robovi | ||
border-radius | border-radius: 10px; |
Zaokroži vse štiri vogale |
border-top-left-radius | border-top-left-radius: 5px; |
Zaokroži zgornji levi vogal |
border-top-right-radius | border-top-right-radius: 5px; |
Zaokroži zgornji desni vogal |
border-bottom-left-radius | border-bottom-left-radius: 5px; |
Zaokroži spodnji levi vogal |
border-bottom-right-radius | border-bottom-right-radius: 5px; |
Zaokroži spodnji desni vogal |
| Drugo | ||
outline | outline: 2px solid red; |
Obroba OKROG roba (ne vpliva na velikost elementa) |
outline-offset | outline-offset: 4px; |
Odmik obrobe od roba elementa |
