13. Obramowanie i obrys

> Dodaj do ulubionych

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.

Model polowy i obramowanie CSS
Budowa pola elementu w modelu polowym CSS

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.

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:

Obramowanie CSS a obrys

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.

Własność obrysuOpis
outlineWłasność Własność zbiorcza ustawiająca wszystkie właściwości obrysu z wyjątkiem właściwości reprezentowanej przez własność outline-offset
outline-colorUstawia kolor obrysu
outline-offsetUstawia położenie obrysu względem krawędzi obszaru obramowania
outline-styleUstawia styl obrysu
outline-widthUstawia szerokość obrysu

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

WłasnośćLogiczna?Opis
borderWłasność zbiorcza definiująca szerokość, styl i kolor obramowania z wszystkich stron elementu
border-blockLogiczna własność zbiorcza definiująca szerokość, styl i kolor obramowania z wszystkich stron elementu
border-block-colorWłasność zbiorcza definiująca kolor obramowania z obu stron elementu w orientacji blokowej
border-block-endWłasność zbiorcza definiująca szerokość, styl i kolor końcowej krawędzi obramowania elementu w orientacji blokowej
border-block-end-colorDefiniuje kolor końcowej krawędzi obramowania elementu w orientacji blokowej
border-block-end-styleDefiniuje styl końcowej krawędzi obramowania elementu w orientacji blokowej
border-block-end-widthDefiniuje szerokość końcowej krawędzi obramowania elementu w orientacji blokowej
border-block-startWłasność zbiorcza definiująca szerokość, styl i kolor początkowej krawędzi obramowania w orientacji blokowej
border-block-start-colorDefiniuje kolor początkowej krawędzi obramowania elementu w orientacji blokowej
border-block-start-styleDefiniuje styl początkowej krawędzi obramowania elementu w orientacji blokowej
border-block-start-widthDefiniuje szerokość początkowej krawędzi obramowania elementu w orientacji blokowej
border-block-styleWłasność zbiorcza definiująca styl obu krawędzi obramowania w orientacji blokowej
border-block-widthWłasność zbiorcza definiująca szerokość obu krawędzi obramowania w orientacji blokowej
border-bottomWłasność zbiorcza definiująca szerokość, styl i kolor dolnej krawędzi obramowania
border-bottom-colorDefiniuje kolor dolnej krawędzi obramowania
border-bottom-left-radiusDefiniuje zaokrąglenie lewego dolnego rogu elementu
border-bottom-right-radiusDefiniuje zaokrąglenie prawego dolnego rogu elementu
border-bottom-styleDefiniuje styl dolnej krawędzi obramowania
border-bottom-widthDefiniuje szerokość dolnej krawędzi obramowania
border-collapseOkreśla, czy krawędzie komórek tabeli mają być scalane
border-colorWłasność zbiorcza określająca kolor wszystkich czterech krawędzi obramowania
border-end-end-radiusDefiniuje zaokrąglenie drugiego rogu końcowej krawędzi obramowania
border-end-start-radiusDefiniuje zaokrąglenie pierwszego rogu końcowej krawędzi obramowania
border-imageWłasność zbiorcza definiująca wszystkie właściwości obrazu w tle obramowania
border-image-outsetOkreśla pozycję obrazu w tle obramowania w stosunku do pola tego obramowania
border-image-repeatOkreśla, czy obraz w tle obramowania ma być powielany czy traktowany w inny sposób
border-image-sliceDzieli obraz w tle obramowania na obszary
border-image-sourceOkreśla ścieżkę do obrazu w tle obramowania
border-image-widthOkreśla szerokość obrazu w tle obramowania
border-inlineWłasność zbiorcza określająca szerokość, styl i kolor obu krawędzi obramowania w orientacji śródliniowej
border-inline-colorWłasność zbiorcza określająca kolor obu krawędzi obramowania w orientacji śródliniowej
border-inline-endWłasność zbiorcza określająca szerokość, styl i kolor końcowej krawędzi obramowania w orientacji śródliniowej
border-inline-end-colorOkreśla kolor końcowej krawędzi obramowania w orientacji śródliniowej
border-inline-end-styleOkreśla styl końcowej krawędzi obramowania w orientacji śródliniowej
border-inline-end-widthOkreśla szerokość końcowej krawędzi obramowania w orientacji śródliniowej
border-inline-startWłasność zbiorcza określająca szerokość, styl i kolor początkowej krawędzi obramowania w orientacji śródliniowej
border-inline-start-colorOkreśla kolor początkowej krawędzi obramowania w orientacji śródliniowej
border-inline-start-styleOkreśla styl początkowej krawędzi obramowania w orientacji śródliniowej
border-inline-start-widthOkreśla szerokość początkowej krawędzi obramowania w orientacji śródliniowej
border-inline-styleWłasność zbiorcza określająca styl obu krawędzi obramowania w orientacji śródliniowej
border-inline-widthWłasność zbiorcza określająca szerokość obu krawędzi obramowania w orientacji śródliniowej
border-leftWłasność zbiorcza określająca szerokość, styl i kolor lewej krawędzi obramowania
border-left-colorOkreśla kolor lewej krawędzi obramowania
border-left-styleOkreśla styl lewej krawędzi obramowania
border-left-widthOkreśla szerokość lewej krawędzi obramowania
border-radiusWłasność zbiorcza określająca zaokrąglenie wszystkich rogów elementu
border-rightWłasność zbiorcza określająca szerokość, styl i kolor prawej krawędzi obramowania
border-right-colorOkreśla kolor prawej krawędzi obramowania
border-right-styleOkreśla styl prawej krawędzi obramowania
border-right-widthOkreśla szerokość prawej krawędzi obramowania
border-spacingOkreśla odstęp między krawędziami obramowania komórek tabeli
border-start-end-radiusOkreśla zaokrąglenie drugiego rogu początkowej krawędzi obramowania
border-start-start-radiusOkreśla zaokrąglenie pierwszego rogu początkowej krawędzi obramowania
border-styleWłasność zbiorcza określająca styl wszystkich krawędzi obramowania
border-topWłasność zbiorcza określająca szerokość, styl i kolor górnej krawędzi obramowania
border-top-colorOkreśla kolor górnej krawędzi obramowania
border-top-left-radiusOkreśla zaokrąglenie lewego górnego rogu elementu
border-top-right-radiusOkreśla zaokrąglenie prawego górnego rogu elementu
border-top-styleOkreśla styl górnej krawędzi obramowania
border-top-widthOkreśla szerokość górnej krawędzi obramowania
border-widthWłasność zbiorcza określająca szerokość wszystkich krawędzi obramowania