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
  • 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 [[css/border]], [[css/border-top]], [[css/border-bottom]], [[css/border-left]], [[css/border-right]]. 
<div style="border-top: 5px solid;">Przykład 6</div>
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

* [[css/border-top-style]] - [[css/border-bottom-style]] - [[css/border-left-style]] - [[css/border-right-style]] * [[css/border]] - [[css/border-top]] - [[css/border-bottom]] - [[css/border-left]] - [[css/border-right]]

Odpowiednik html

* brak

Wersja specyfikacji

* CSS 1

Wsparcie przeglądarek

* Opera 3.5 * Internet Explorer 3
CSS

0 komentarzy