CSS/Obramowanie
border
edytujborder - Określa wszystkie cechy obramowania na wszystkich krawędziach:
border: styl wielkość kolor;
styl - wygląd obramowania: | wielkość - rozmiar obramowania: | kolor - kolor obramowania |
---|---|---|
|
Można podać konkretną wartość np. 2px lub jedną ze stałych:
|
Kolor w Jednostkach koloru np.:
|
border-style border-width border-color
edytujAtrybuty z grupy border-* określają konkretną cechę dla całego obramowania:
- border-style: styl - wygląd obramowania:
- border-width: wielkość - rozmiar obramowania:
- border-color: kolor - kolor obramowania
Stosuje się gdy potrzeba zmienić tylko jedną cechę obramowania a pozostałe pozostawić domyślne.
Kod... | ...jest równoznaczny z... |
---|---|
border-style:solid; border-width: thick; border-color:red; |
border:solid thick red; |
border-style:dotted; border-width: 20cm; border-color:#ED952F; |
border:dotted 20cm #ED952F; |
border-top border-bottom border-left border-right
edytujAtrybuty te określają cechy jednej z krawędzi (górnej,dolnej,lewej,prawej) obramowania. Przyjmują zawartości jak ogólny border lecz dotyczą tylko jednej krawędzi.
border-top:solid thin blue; | ||
border-left:dotted medium red; | border-right:double thick green; | |
border-bottom:ridge 4px orange; |
border-top-style border-bottom-style border-left-style border-right-style border-top-width border-bottom-width border-left-width border-right-width border-top-color border-bottom-color border-left-color border-right-color
edytujAtrybuty z tej grupy są jednocześnie atrybutami określającymi daną cechę jak i konkretną krawędź obramowania.
Border-radius
edytujOznacza zaokrąglone rogi np:
Uwaga: atrybut nie działa we wszystkich przeglądarkach. Ponadto w niektórych wymaga przedrostka -moz lub -webkit-. Najlepiej wartość podawać trzykrotnie (z 2 przedrostkami oraz bez)