Granice CSS
Właściwości obramowania CSS pozwalają określić styl, szerokość i kolor obramowania elementu.
Mam granice ze wszystkich stron.
Mam czerwoną dolną ramkę.
Mam zaokrąglone granice.
Styl obramowania CSS
Właściwość border-style
określa, jaki rodzaj obramowania ma być wyświetlany.
Dozwolone są następujące wartości:
dotted
- Definiuje kropkowaną granicędashed
- Definiuje przerywaną granicęsolid
- Definiuje solidną granicędouble
- Definiuje podwójną granicęgroove
- Definiuje rowkowane obramowanie 3D. Efekt zależy od wartości koloru obramowaniaridge
- Definiuje prążkowaną granicę 3D. Efekt zależy od wartości koloru obramowaniainset
- Definiuje wstawkę 3D. Efekt zależy od wartości koloru obramowaniaoutset
- Definiuje granicę początkową 3D. Efekt zależy od wartości koloru obramowanianone
- Definiuje brak obramowaniahidden
- Definiuje ukrytą granicę
Właściwość border-style
może mieć od jednej do czterech wartości (dla górnej granicy, prawej granicy, dolnej granicy i lewej granicy).
Przykład
Demonstracja różnych stylów obramowania:
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Wynik:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Uwaga: Żadna z INNYCH właściwości obramowania CSS (o których dowiesz się więcej w następnych rozdziałach) nie będzie miała ŻADNEGO efektu, chyba że
border-style
właściwość zostanie ustawiona!