Własność CSS border-image-source

Własność CSS border-image-source określa źródło obrazu użytego w tle obramowania elementu. Obraz ten zastępuje ustawienie własności border-style.

Przykłady

W tym przykładzie w tle obramowania elementu div został ustawiony gradient radialny.

div {
  border: 30px solid black;
  border-image-source: radial-gradient(red, green, blue);
  border-image-slice: 55;
  border-image-repeat: round;
  padding: 30px;
}
...
<div></div>

Efekt:

Składnia i wartości

Własność border-image-source przyjmuje dowolną obsługiwaną przez CSS wartość obrazu, a więc na przykład ścieżkę do pliku określoną za pomocą funkcji url() albo gradient zdefiniowany za pomocą jednej z funkcji gradientów.

Zastosowanie

Własność border-image-source 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-source odnosi się także do pseudoelementu ::first-letter.

Podsumowanie