CSS

Border-style

  • 2007-01-04 18:55
  • 0 komentarzy
  • 9324 odsłony
  • Oceń ten tekst jako pierwszy
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.

<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


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


Odpowiednik html


  • brak

Wersja specyfikacji


Wsparcie przeglądarek


  • Opera 3.5
  • Internet Explorer 3