Właściwość border-style ustawia styl brzegów (krawędzi, granic) elementu.
border: solid
Możliwe wartości to:
- None - brak obramowania
- Wartość "hidden" - obramowanie ukryte
- solid - ciągła linia
- dashed - przerywana linia
- dotted - linia kropkowana
- double - obramowanie składające się z podwójnej lini
- groove - linia wklęsła stylizowana
- ridge - linia wypukła stylizowana
- inset - linia wklęsła prosta
- outset - linia wypukła prosta
- Inherit - przejęcie wartości rodzica
Domyślnym stylem obramowania jest "none".
Aby styl był widoczny należy ustalić grubość obramowania (Border-width) ponieważ domyślnie w większości przeglądarek wynosi ona 0.Ustalanie stylu dla poszczególnych krawędzi
Można określić, której krawędzi dotyczy styl przez kolejność wymieniania wartości:
element { border-style: a } //ustala wartość "a" dla wszystkich krawędzi
element { border-style: a b } //"a" dla górnej i dolnej krawędzi, "b" dla prawej i lewej
element { border-style: a b c } //"a" dla górnej, "b" dla lewej i prawej, "c" dla dolnej
element { border-style: a b c d } //"a" góra, "b" prawa, "c" dolna, "d" lewa
Przykładowo:
<div style="border-style: solid; border-width: 5px;">Przykład 1</div>
Przykład 1
<div style="border-style: solid dotted; border-width: 5px;">Przykład 2</div>
Przykład 2
<div style="border-style: solid dotted double; border-width: 5px;">Przykład 3</div>
Przykład 3
<div style="border-style: solid dotted double groove; border-width: 5px;">Przykład 4</div>
Przykład 4
Można też ustalić styl tylko dla jednej krawędzi poprzez właściwości Border-top-style, Border-bottom-style, Border-left-style i Border-right-style.
<div style="border-top-style: solid; border-width: 5px;">Przykład 5</div>
Przykład 5
Lub mieszane wartości Border, Border-top, Border-bottom, Border-left, Border-right.
```css
Przykład 6
```
Przykład 6
Wartość dotted
Stylu "dotted" należy używać ostrożnie, ponieważ każda przeglądarka wyświetla go na swój sposób. Ilustruje to poniższa tabela:Mozilla Firefox | Opera | Internet Explorer |
---|---|---|
 |  |  |