Utwórz konto Logowanie

CSS

Border-style

id02009

Właściwość border-style ustawia styl brzegów (krawędzi, granic) elementu.

border: solid

Możliwe wartości to:

  • None - brak obramowania
  • 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 FirefoxOperaInternet Explorer
![border_dotted_ff.png](//static.4programmers.net/uploads/attachment/4ccd36d8ba274.png) ![border_dotted_opera.png](//static.4programmers.net/uploads/attachment/4ccd36d8bd791.png) ![border_dotted_msie.png](//static.4programmers.net/uploads/attachment/4ccd36d8bd2c5.png)
W celu uzyskania efektu kropkowanego obramowania najlepiej użyć grafiki. Można spodziewać sie zmiany wyświetlania obramowania kropkowanego w Internet Explorer 7. Na IEBlogu w zmianach dotyczących CSS można przeczytać "1 px dotted borders no longer render as dashed".

Polecenia pokrewne

* Border-top-style - Border-bottom-style - Border-left-style - Border-right-style * Border - Border-top - Border-bottom - Border-left - Border-right

Odpowiednik html

* brak

Wersja specyfikacji

* CSS 1

Wsparcie przeglądarek

* Opera 3.5 * Internet Explorer 3
CSS

0 komentarzy