Własność CSS border-image

> Dodaj do ulubionych

Własność CSS border-image to własność zbiorcza CSS służąca do ustawiania obrazu lub gradientu w tle obramowania elementu.

Definiując tę własność, powinno się dodatkowo zdefiniować kolor obramowania, który będzie widoczny w przypadku nieznalezienia obrazu przez przeglądarkę.

Własność zbiorcza border-image obejmuje następujące własności indywidualne:

Przykłady

Poniższy element div ma obramowanie złożone z gwiazdek o szerokości i wysokości 29 pikseli:

div {
  border: 29px solid green;
  border-image: url("stars.png") 29 round;
}
...
<div></div>

Efekt:

Obramowanie z gwiazdek dodane za pomocą własności CSS border-image

Z kolei w poniższym przykładzie tłem obramowania elementu div jest gradient złożony z trzech kolorów.

div {
  border: 29px solid green;
  border-image: linear-gradient(red, green, blue) 29;
}
...
<div></div>

Efekt:

Obramowanie gradientowe dodane za pomocą własności CSS border-image

Składnia i wartości

Własność border-image przyjmuje od jednej do pięciu grup wartości odpowiadających jej własnościom składowym. Wartość własności border-image-source jest obowiązkowa. Pozostałe są opcjonalne. Jeśli któraś z nich zostanie pominięta, to otrzyma wartość domyślną.

Formalna definicja składni własności border-image:

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Ta definicja oznacza, że własność border-image musi mieć zdefiniowaną wartość dla własności border-image-source, po której może znajdować się wartość własności border-image-slice.

Następnie po ukośniku może znajdować się wartość własności border-image-width, po której, po kolejnym ukośniku, mogą znajdować się wartości własności border-image-outset i border-image-repeat (rozdzielone tylko spacjami), np.:

border-image: url("stars.png") 29 29 / 40px 20px / 30px round stretch;

Przyjrzymy się składnikom tej deklaracji po kolei:

Grupa elementów ujętych w nawias kwadratowy ([ ]) jest opcjonalna i może zostać pominięta w całości, dlatego prawidłowy jest także poniższy zapis:

border-image: url("stars.png") 29 40 round space;

W tej deklaracji CSS mamy zdefiniowane wartości własności border-image-source (url("stars.png")), border-image-slice (29 40) oraz border-image-repeat (round space).

Zastosowanie

Własność border-image odnosi się do wszystkich elementów z wyjątkiem wewnętrznych elementów tabeli (np. tr, th, td), której własność border-collapse jest ustawiona na collapse.

Ponadto własność border-image odnosi się także do pseudoelementu ::first-letter.

Podsumowanie
ZastosowanieWszystkie elementy HTML z wyjątkiem wewnętrznych elementów tabeli (np. tr, th, td), której własność border-collapse jest ustawiona na collapse, oraz pseudoelement ::first-letter
Własności składowe
Obsługiwane wartościZobacz opis poszczególnych własności
Wartość początkowaWartości początkowe odpowiadają wartościom początkowym własności składowych, czyli:
DziedziczenieNie
SpecyfikacjaCSS Backgrounds and Borders Module Level 3 – border-image