CSS border

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

CSS `border`

Właściwość border służy do ustawiania obramowania elementu HTML. Jest to zapis skrócony, który może określać jednocześnie szerokość, styl oraz kolor obramowania.

Składnia

selektor {
  border: szerokość styl kolor;
}

Przykład:

div {
  border: 1px solid red;
}

Ten zapis tworzy obramowanie o szerokości 1px, stylu solid i kolorze czerwonym.

Najważniejsze składniki

border-width - szerokość obramowania, np. 1px, 2px, thin,
border-style - styl linii, np. solid, dashed, dotted,
border-color - kolor obramowania, np. red, #ff0000, rgb(255, 0, 0).

Przykłady stylów obramowania

.ramka1 {
  border: 2px solid black;
}

.ramka2 {
  border: 2px dashed blue;
}

.ramka3 {
  border: 2px dotted green;
}

Najczęściej spotykany styl to solid, czyli pojedyncza ciągła linia.

Obramowanie dla poszczególnych krawędzi

Można ustawić osobne obramowania dla każdej strony elementu:

border-top: 1px solid red;
border-right: 1px solid blue;
border-bottom: 1px solid green;
border-left: 1px solid yellow;

W pytaniach egzaminacyjnych często pojawia się połączenie:

border: solid 1px;
border-color: red blue green yellow;

Pierwsza linia ustawia widoczne obramowanie, a druga przypisuje kolory kolejno: góra, prawa, dół, lewa.