Własność CSS border-image

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:

• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

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 obramowania
• round 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.