Obramowanie (border)

Artykuł  | Mirosław Zelent

Do ustawienia obramowania używamy właściwości border (ang. border = obwódka na krawędzi, obszar graniczny elementu). Możemy zastosować trzy podstawowe subatrybuty: border-width (szerokość obramowania w pikselach), border-style (rodzaj linii stanowiącej obwódkę – patrz ilustracja poniżej) oraz border-color (kolor obwódki). Przykładowe style:

{
border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: ridge;
border-style: groove;
border-style: inset;
border-style: outset;
}
border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: ridge;
border-style: groove;
border-style: inset;
border-style: outset;

Natomiast w praktyce, często nie piszemy następujących po sobie trzech kolejnych właściwości, tylko stosujemy zapis skrótowy, pisząc jedynie słowo border, a po dwukropku trzy wartości rozdzielone spacją i zakończone oczywiście średnikiem. Najpierw podajemy szerokość w pikselach, potem rodzaj linii i na końcu jej kolor.

{ border: 2px solid green; }

Można także użyć subatrybutów: left, right, top, bottom. Ponadto istnieje właściwość border-image, pozwalająca użyć obrazu jako obramowania (więcej na ten temat znajdziesz tutaj). Zobaczmy zatem jeszcze kilka przykładów użycia obramowania:

{
border-left: 1px solid black;
border-right: 1px dashed blue;
border-top: 1px groove green;
border-bottom: 1px dotted yellow;
border-image: url("obraz.png") 30 round;
}

Komentarze

Czy macie jakieś uwagi, pytania, sugestie? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach. Dziękujemy Wam za poświęcony czas!