13. Obramowanie i obrys

Obramowanie to rodzaj dekoracji otaczającej element na stronie internetowej, który znajduje się między dopełnieniem a marginesem (spójrz na poniższą ilustrację). Za jego pomocą można uzyskać różne ciekawe efekty, na przykład wizualnie oddzielić od siebie dwie sekcje strony albo ozdobić wybrany element, aby nadać mu atrakcyjny wygląd itp.

W CSS dostępny jest całkiem pokaźny zestaw własności umożliwiających definiowanie różnych właściwości wszystkich czterech krawędzi obramowania wszystkich elementów HTML z osobna lub na raz.

Na przykład, za pomocą własności border-radius można zdefiniować zaokrąglenie rogów elementu, za pomocą własności border-image można zdefiniować obraz w tle obramowania, własność border-color umożliwia ustawienie jego koloru, a własności border-width i border-style pozwalają odpowiednio na ustawienie szerokości i stylu.

Ponadto istnieją także specjalne własności do pracy z obramowaniem komórek tabel. Są to własności border-spacing (określa odstęp między komórkami tabeli) i border-collapse (określa, czy sąsiadujące krawędzie obramowania komórek mają być scalane).

Do najczęściej używanych własności obramowania CSS zalicza się własność zbiorcza border, która ustawia szerokość (border-width), styl (border-style) i kolor (border-color) wszystkich czterech krawędzi obramowania elementu na raz, np.:

p {border: 1px solid black}

Ta reguła CSS nadaje akapitom jednolitą linię obramowania o szerokości jednego piksela w kolorze czarnym z wszystkich stron.

Oczywiście właściwości obramowania można definiować z każdej strony osobno. Służą do tego własności zawierające w nazwach słowa kierunkowe top (góra), right (prawa), bottom (dół) i left (lewa), np. border-top-color (kolor górnej krawędzi obramowania), border-bottom-width (szerokość dolnej krawędzi obramowania) itd.

border-right-style: dotted;

Ta deklaracja definiuje przerywaną linię prawej krawędzi obramowania. Natomiast poniższa deklaracja nadaje lewej krawędzi obramowania zielony kolor:

border-left-color: green;

Właściwości obramowania

W CSS dla każdej krawędzi obramowania osobno lub dla wszystkich krawędzi na raz można zdefiniować następujące właściwości:

• kolor – color
• styl – style
• szerokość – width
• zaokrąglenie – radius

Nazwa każdej własności odnoszącej się do obramowania zaczyna się od słowa kluczowego border, po nim dodaje się słowo kierunkowe (top, right, bottom lub left – jeśli chcemy zdefiniować własność tylko dla wybranej krawędzi), a następnie wpisuje się słowo kluczowe oznaczające modyfikowaną cechę, np.

• border-bottom-color – kolor dolnej krawędzi obramowania
• border-top-style – styl górnej krawędzi obramowania
• border-width – szerokość wszystkich czterech krawędzi obramowania

Dodatkowo dostępne są własności umożliwiające definiowanie obrazów w tle obramowania oraz odnoszące się do obramowania komórek tabeli, które występują tylko w wersji odnoszącej się do krawędzi z wszystkich czterech stron:

• border-collapse – kontroluje scalanie sąsiadujących krawędzi obramowania komórek
• border-spacing – kontroluje odstęp między komórkami tabeli
• grupa własności border-image – kontrolują właściwości obrazu w tle obramowania

Wszystkie wymienione do tej pory przykłady odnoszą się do tzw. fizycznych własności obramowania. Poza nimi istnieje też grupa logicznych własności obramowania. Różnice między nimi są opisane w dalszej części tego rozdziału. Natomiast na samym końcu znajduje się alfabetyczny wykaz wszystkich dostępnych w CSS własności obramowania.

Obramowanie a obrys

Obramowanie i obrys to bardzo podobne elementy dekoracyjne, które różnią się między sobą przede wszystkim następującymi szczegółami:

• Po pierwsze obrys obejmuje obszar znajdujący się na zewnątrz krawędzi obszaru obramowania, tzn. otacza je.
• Po drugie obrys, w odróżnieniu od obramowania, nie zajmuje miejsca, więc nie ma wpływu na rozmieszczenie elementów na stronie. Innymi słowy, obramowanie w większości przypadków powoduje zmianę rozmiaru elementu, jeśli podlega ona zasadom standardowego modelu polowego, i pewne przesunięcia treści tego elementu, natomiast obrys tego nie robi, tylko ewentualnie nakłada się na sąsiednie elementy.
• Obrys, w odróżnieniu od obramowania, nie musi mieć prostokątnego kształtu.
• Przeglądarki dodają obrys do elementów, które są w stanie :focus-visible.

Poniżej znajduje się przykład elementu, który ma zdefiniowane zarówno obramowanie (kolor czerwony), jak i obrys (kolor zielony).

div {
  border: 5px solid red;
  outline: 5px solid green;
  width: 200px;
}
...
<div>Lorem ipsum dolor.</div>

Efekt:

Do definiowania właściwości obrysu służą cztery indywidualne własności CSS: outline-color, outline-style, outline-width oraz outline-offset, a także własność zbiorcza outline, za pomocą której można ustawiać trzy pierwsze z wymienionych własności indywidualnych na raz.

Poniższa tabela zawiera wykaz wszystkich własności obrysu CSS z krótkimi opisami. Kliknij nazwę dowolnej z nich, aby przejść do strony z bardziej szczegółowym opisem.

Obramowanie fizyczne i logiczne

Fizyczne własności obramowania to te, które określają obramowanie w odniesieniu do strony, niezależnie od kierunku i orientacji pisma dokumentu, a więc odnoszą się do kierunków góra, prawa, dół i lewa (odpowiednio top, right, bottom, left).

Natomiast logiczne własności obramowania (ang. flow-relative border properties) to te, które określają obramowanie w odniesieniu do kierunku i orientacji pisma dokumentu.

W poniższej tabeli znajduje się alfabetyczna lista wszystkich własności obramowania CSS, zarówno fizycznych jak i logicznych, wraz ze zwięzłymi opisami. Kliknij nazwę wybranej własności, aby przejść do strony z jej szczegółowym opisem.

Lista własności obramowania