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:

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:

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:
url("stars.png")
– źródło obrazu (border-image-source
)29 29
– szerokość i wysokość wycinka obrazu (border-image-slice
)/ 40px 20px
– szerokość górnej i dolnej oraz lewej i prawej krawędzi obramowania (border-image-width
)/ 30px
– odległość obrazu obramowania od krawędzi obszaru obramowaniaround stretch
– sposób dostosowania elementów tworzących obramowanie do obramowania (border-image-repeat
)
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
.
Zastosowanie | Wszystkie 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ści | Zobacz opis poszczególnych własności |
Wartość początkowa | Wartości początkowe odpowiadają wartościom początkowym własności składowych, czyli:
|
Dziedziczenie | Nie |
Specyfikacja | CSS Backgrounds and Borders Module Level 3 – border-image |