Własność CSS border-image-width

Własność CSS border-image-width określa szerokość obrazu umieszczonego w tle obramowania elementu.

Jeśli jej wartość jest mniejsza od wartości własności border-width, to obraz zajmuje tylko określoną część obszaru całego obramowania.

Jeśli wartość tej własności jest większa od wartości własności border-width, to obraz obramowania wychodzi poza obszar obramowania, ale nie powoduje przesunięcia sąsiednich elementów, tylko się na nie nakłada.

Przykłady

W tym przykładzie w tle obramowania elementu div został ustawiony gradient liniowy o szerokości 30 pikseli, a więc nieco większej niż szerokość samego obramowania.

div {
  border: 20px solid red;
  border-image: linear-gradient(red, green, blue) 25;
  padding: 50px;
  border-image-width: 30px;
}
...
<div></div>

Efekt:

Składnia i wartości

Własność border-image-width przyjmuje liczby z jednostką długości, wartości procentowe, liczby bez jednostki oraz słowo kluczowe auto. Wartości ujemne są niedozwolone.

• Liczba z jednostką: określa szerokość obrazu obramowania w określonej jednostce długości, np. w pikselach.
• Wartość procentowa: odnosi się do szerokości obszaru obrazu obramowania w przypadku krawędzi pionowych i do wysokości obszaru obrazu obramowania w przypadku krawędzi poziomych.
• Liczba bez jednostki: jest mnożnikiem odpowiedniej wartości obliczonej własności border-width.
• Słowo kluczowe auto: szerokość obramowania jest równa wewnętrznej szerokości lub wysokości wycinka zdefiniowanego przez własność border-image-slice, a jeśli jej nie ma, to odnosi się do ustawienia własności border-width.

Własność border-image-width przyjmuje jedną, dwie, trzy lub cztery wartości.

• Jedna wartość: wszystkie cztery krawędzie obramowania mają tę samą szerokość.
• Dwie wartości: pierwsza określa szerokość górnej i dolnej krawędzi obramowania, a druga – lewej i prawej.
• Trzy wartości: pierwsza odnosi się do górnej krawędzi obramowania, druga – do lewej i prawej krawędzi obramowania, a trzecia – do dolnej krawędzi obramowania.
• Cztery wartości: odnoszą się po kolei do górnej, prawej, dolnej i lewej krawędzi obramowania.

Zastosowanie

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

Podsumowanie