border-image

Zastępuje zwykłe obramowanie obrazkiem albo gradientem pociętym na narożniki i krawędzie.

Wartość domyślna: none 100% / 1 / 0 stretch
Dziedziczona: Nie
Animowalna: częściowo: wycinek, grubość i wysunięcie tak, obraz i powtarzanie nie
Dotyczy: wszystkie elementy poza wewnętrznymi elementami tabel z border-collapse: collapse
JavaScript: element.style.borderImage = "linear-gradient(#7c3aed, #0ea5e9) 1"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.plan {
  padding: 16px;
  border: 3px solid #7c3aed;
  border-image: linear-gradient(135deg, #7c3aed, #0ea5e9, #10b981) 1;
}

Podgląd

Definicja i zastosowanie

Właściwość border-image rysuje obramowanie z obrazka zamiast z linii. Przeglądarka tnie obraz na dziewięć części, jak planszę do gry w kółko i krzyżyk: cztery narożniki trafiają w rogi ramki, cztery krawędzie są rozciągane lub powtarzane wzdłuż boków, a środek domyślnie zostaje pusty.

To skrót dla pięciu właściwości: border-image-source (obraz lub gradient), border-image-slice (gdzie ciąć: liczba bez jednostki oznacza piksele obrazu, można też podać procenty), border-image-width (grubość ramki), border-image-outset (o ile wysunąć ramkę na zewnątrz) i border-image-repeat (jak wypełnić boki: stretch, repeat, round lub space). Słowo fill przy wycinku każe narysować także środek.

Obraz ląduje w miejscu obramowania, więc element potrzebuje obramowania z grubością i stylem, na przykład border: 12px solid #7c3aed. Bez stylu grubość obramowania wynosi 0 i obrazka nie widać, a kolor z tej deklaracji posłuży za zapas, gdyby obraz się nie wczytał.

Najczęściej spotkasz dziś border-image z gradientem: linear-gradient(…) 1 daje kolorową ramkę bez żadnych plików. Pamiętaj tylko, że border-radius nie zaokrągla obrazu w ramce. Zaokrągloną ramkę z gradientem zrobisz dwiema warstwami tła, co pokazuje dodatkowy przykład.

Składnia

border-image: <źródło> || <wycinek> [ / <grubość> | / <grubość>? / <wysunięcie> ]? || <powtarzanie>;

Wartości

none
Brak obrazka, widać zwykłe szare obramowanie z deklaracji border. Po lewej leży obrazek źródłowy 60 × 60px, którego używają pozostałe przykłady, z liniami cięcia co 20px.
stretch
powtarzanie krawędzi
Zmienna --frame zawiera obrazek z lewej, a wycinek 20 tnie go co 20px. Krawędzie rozciągają się na całą długość boku, więc kółka zmieniają się w elipsy. To wartość domyślna.
repeat
powtarzanie krawędzi
Kafelki krawędzi powtarzają się od środka boku. Przy narożnikach mogą zostać ucięte w połowie.
round
powtarzanie krawędzi
Kafelki powtarzają się i lekko skalują, żeby na boku zmieściła się ich pełna liczba. Nic nie jest ucięte.
space
powtarzanie krawędzi
Na boku zostają tylko całe kafelki bez skalowania, a wolne miejsce rozkłada się równo między nimi.
fill
wycinek z wypełnieniem
Słowo fill w wycinku rysuje też środek obrazka, czyli błękitne kółko, powtarzane tu na całym wnętrzu jak dodatkowe tło.
linear-gradient(…) 1
gradient jako źródło
Gradient zamiast pliku. Wycinek 1 sprawia, że krawędzie tworzą ciągłą, kolorową ramkę.

Wartość	Typ	Opis
none		Brak obrazka, widać zwykłe szare obramowanie z deklaracji `border`. Po lewej leży obrazek źródłowy 60 × 60px, którego używają pozostałe przykłady, z liniami cięcia co 20px.
stretch	powtarzanie krawędzi	Zmienna `--frame` zawiera obrazek z lewej, a wycinek `20` tnie go co 20px. Krawędzie rozciągają się na całą długość boku, więc kółka zmieniają się w elipsy. To wartość domyślna.
repeat	powtarzanie krawędzi	Kafelki krawędzi powtarzają się od środka boku. Przy narożnikach mogą zostać ucięte w połowie.
round	powtarzanie krawędzi	Kafelki powtarzają się i lekko skalują, żeby na boku zmieściła się ich pełna liczba. Nic nie jest ucięte.
space	powtarzanie krawędzi	Na boku zostają tylko całe kafelki bez skalowania, a wolne miejsce rozkłada się równo między nimi.
fill	wycinek z wypełnieniem	Słowo `fill` w wycinku rysuje też środek obrazka, czyli błękitne kółko, powtarzane tu na całym wnętrzu jak dodatkowe tło.
linear-gradient(…) 1	gradient jako źródło	Gradient zamiast pliku. Wycinek `1` sprawia, że krawędzie tworzą ciągłą, kolorową ramkę.

Wartości w praktyce

none

Brak obrazka, widać zwykłe szare obramowanie z deklaracji border. Po lewej leży obrazek źródłowy 60 × 60px, którego używają pozostałe przykłady, z liniami cięcia co 20px.

.demo { border-image: none; }

stretch

Zmienna --frame zawiera obrazek z lewej, a wycinek 20 tnie go co 20px. Krawędzie rozciągają się na całą długość boku, więc kółka zmieniają się w elipsy. To wartość domyślna.

.demo { border-image: var(--frame) 20 stretch; }

repeat

Kafelki krawędzi powtarzają się od środka boku. Przy narożnikach mogą zostać ucięte w połowie.

.demo { border-image: var(--frame) 20 repeat; }

round

Kafelki powtarzają się i lekko skalują, żeby na boku zmieściła się ich pełna liczba. Nic nie jest ucięte.

.demo { border-image: var(--frame) 20 round; }

space

Na boku zostają tylko całe kafelki bez skalowania, a wolne miejsce rozkłada się równo między nimi.

.demo { border-image: var(--frame) 20 space; }

fill

Słowo fill w wycinku rysuje też środek obrazka, czyli błękitne kółko, powtarzane tu na całym wnętrzu jak dodatkowe tło.

.demo { border-image: var(--frame) 20 fill round; }

linear-gradient(…) 1

Gradient zamiast pliku. Wycinek 1 sprawia, że krawędzie tworzą ciągłą, kolorową ramkę.

.demo { border-width: 6px; border-image: linear-gradient(135deg, #7c3aed, #0ea5e9) 1; }

Więcej przykładów

Zaokrąglona ramka z gradientem

CSS

.plan {
  padding: 16px;
  border: 3px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#18181b, #18181b) padding-box,
    linear-gradient(135deg, #7c3aed, #0ea5e9, #10b981) border-box;
}

Podgląd

border-image ignoruje border-radius, więc zaokrągloną ramkę robi się inaczej. Pierwsza warstwa tła wypełnia wnętrze (padding-box), a druga, z gradientem, prześwituje tylko przez przezroczyste obramowanie (border-box).

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Przy gradiencie zawsze podaj wycinek, najczęściej 1. Skrót bez wycinka ustawia domyślne 100%: cały obraz trafia wtedy w narożniki, a boki zostają puste.
Do ozdobnych ramek z wzorem wybieraj round albo space. Przy repeat kafelki przy narożnikach bywają ucięte, a stretch rozciąga wzór.
Zaokrąglonej ramki nie zrobisz przez border-image. Użyj przezroczystego obramowania i dwóch warstw tła z padding-box i border-box.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs