Kurs HTML

Wprowadzenie: Linia wokół elementu

Właściwość border w CSS pozwala na rysowanie linii (obramowania lub ramki) wokół elementu HTML. Obramowanie znajduje się na zewnątrz paddingu, a wewnątrz marginesu.

Border składa się z trzech podstawowych aspektów: grubości (border-width), stylu (border-style) i koloru (border-color). Można je ustawiać indywidualnie lub za pomocą właściwości zbiorczej border.

Obramowanie jest często używane do wizualnego oddzielania elementów, tworzenia ramek dla obrazków, przycisków, sekcji strony czy tabel.

Podstawowe właściwości obramowania

• border-width: Określa grubość linii obramowania. Może przyjmować wartości długości (np. px, em) lub słowa kluczowe: thin (cienkie), medium (średnie - domyślne), thick (grube).
• border-style: Określa styl linii. Jest to **wymagana** właściwość, aby obramowanie było widoczne (domyślnie none). Najważniejsze wartości:
  • none: Brak obramowania (domyślne).
  • hidden: Jak none, ale ma znaczenie przy rozwiązywaniu konfliktów obramowań w tabelach.
  • solid: Ciągła linia.
  • dotted: Linia kropkowana.
  • dashed: Linia przerywana (kreskowana).
  • double: Podwójna ciągła linia (całkowita grubość równa border-width).
  • groove: Efekt 3D - wyżłobiona ramka.
  • ridge: Efekt 3D - wypukła ramka.
  • inset: Efekt 3D - element wydaje się wciśnięty.
  • outset: Efekt 3D - element wydaje się wypukły.
• border-color: Określa kolor linii. Może przyjmować dowolną wartość koloru CSS. Domyślnie przyjmuje wartość właściwości color (kolor tekstu) elementu.

.ramka {
  border-width: 2px;
  border-style: dashed; /* Bez tego obramowanie nie będzie widoczne! */
  border-color: green;
}

Właściwość zbiorcza border

Najczęściej używa się właściwości zbiorczej border, która pozwala ustawić grubość, styl i kolor dla wszystkich czterech stron jednocześnie w jednej deklaracji. Wartości można podawać w dowolnej kolejności.

.ramka-zbiorcza {
  /* Grubość, Styl, Kolor */
  border: 1px solid black; 
}

.inna-ramka {
  border: thick dotted blue; /* Użycie słów kluczowych i nazwy koloru */
}

.bez-ramki {
  border: none; /* Jawne usunięcie obramowania */
}

Ważne: Jeśli używasz skrótu border, musisz podać co najmniej border-style, aby ramka była widoczna. Jeśli podasz tylko np. border: 1px black;, ramka się nie pojawi, bo brakuje stylu (domyślnie none).

Stylizowanie poszczególnych krawędzi

Można również stylizować każdą krawędź (górną, prawą, dolną, lewą) niezależnie, używając bardziej szczegółowych właściwości:

• Właściwości zbiorcze dla krawędzi:
  • border-top: [width] [style] [color];
  • border-right: [width] [style] [color];
  • border-bottom: [width] [style] [color];
  • border-left: [width] [style] [color];
• Indywidualne właściwości dla krawędzi:
  • Np. border-top-width, border-top-style, border-top-color
  • Np. border-left-width, border-left-style, border-left-color
  • itd. dla right i bottom.
• Ustawianie grubości/stylu/koloru dla wielu krawędzi naraz:
  • border-width: [top] [right] [bottom] [left]; (analogicznie jak padding/margin)
  • border-style: [top] [right] [bottom] [left];
  • border-color: [top] [right] [bottom] [left];

.tylko-dolna {
  border-bottom: 2px solid blue; /* Tylko dolna krawędź */
}

.rozne-krawedzie {
  border-top: 1px solid red;
  border-right: 2px dashed green;
  border-bottom: 3px dotted blue;
  border-left: 4px double orange;
}

.rozne-grubosci {
  /* 1px góra, 2px prawo/lewo, 3px dół */
  border-width: 1px 2px 3px;
  border-style: solid;
  border-color: black;
}

.rozne-kolory {
  /* czerwony góra, zielony prawo, niebieski dół, pomarańczowy lewo */
  border-color: red green blue orange;
  border-width: 1px;
  border-style: solid;
}

Zaokrąglone rogi (border-radius)

Właściwość border-radius pozwala na zaokrąglenie rogów elementu. Może przyjmować jedną, dwie, trzy lub cztery wartości długości lub procentów, działając analogicznie do składni padding/margin dla poszczególnych rogów (górny-lewy, górny-prawy, dolny-prawy, dolny-lewy).

• Jedna wartość: border-radius: 10px; - wszystkie rogi zaokrąglone o 10px.
• Dwie wartości: border-radius: 10px 20px; - górny-lewy i dolny-prawy o 10px, górny-prawy i dolny-lewy o 20px.
• Trzy wartości: border-radius: 10px 20px 30px; - górny-lewy 10px, górny-prawy i dolny-lewy 20px, dolny-prawy 30px.
• Cztery wartości: border-radius: 10px 20px 30px 40px; - kolejno: górny-lewy, górny-prawy, dolny-prawy, dolny-lewy.

Można również definiować eliptyczne zaokrąglenia, podając dwie wartości oddzielone ukośnikiem (/) dla każdego rogu (promień poziomy / promień pionowy), np. border-top-left-radius: 20px / 10px;.

Wartość 50% użyta jako border-radius dla elementu kwadratowego stworzy idealne koło.

.zaokraglony-prostokat {
  border: 1px solid gray;
  padding: 20px;
  border-radius: 8px; /* Wszystkie rogi zaokrąglone */
}

.kolo {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%; /* Tworzy koło */
}

.zakladka {
  border: 1px solid blue;
  padding: 10px;
  /* Zaokrąglone tylko górne rogi */
  border-radius: 10px 10px 0 0; 
}

Border a rozmiar elementu (box-sizing: content-box)

Podobnie jak padding, przy domyślnym box-sizing: content-box;, grubość obramowania jest **dodawana** do wymiarów width i height, aby obliczyć całkowity rozmiar elementu.

Całkowita Szerokość = width + padding-left + padding-right + border-left-width + border-right-width

Dodanie obramowania do elementu o stałej szerokości width zwiększy jego wizualną szerokość na ekranie.