Tematy: border-top-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius | border-radius | box-shadow | border-image-source | border-image-width | border-image-outset | border-image-repeat | border-image-slice | border-image | box-decoration-break
| Dane w pigułce | |
| Zastosowanie | Określa sposób powtarzania brzegu |
| Dziedziczenie | nie |
| Wartości | repeat, stretch, round |
| Wartość domyślna | brak |
| Przykład | border-image-repeat: repeat |
| Składnia JavaScript | object.style.borderImageRepeat="repeat" |
Aby zdefiniować sposób powtarzania, należy wpisać w definicji stylu border-image-repeat: wartość;
Stylu tego w kanonicznej postaci W3C nie obsługuje poprawnie żadna przeglądarka - trzy przeglądarki, Firefox, Chrome i Opera, posługują się zmodyfikowaną wersją i konieczne jest użycie prefiksów -moz-, -webkit- i -o-, np.:
border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
Pokażmy działanie wartości stretch. Jak widać, następuje rozciągnięcie brzegów obrazka (tutaj: beżowych rombów). Podana wartość 27 odpowiada rozmiarowi tego fragmentu, wskutek czego rozciągany jest dokładny obraz każdego rombu, na długość odpowiadającego mu brzegu pojemnika, ale tylko do narożnika.
Pokażmy teraz działanie wartości repeat. Jak widzimy, następuje powielenie brzegów obrazka (beżowych rombów). Podana wartość 27 odpowiada rozmiarowi tego fragmentu, wskutek czego powielany jest dokładny obraz każdego rombu. Jeśli rozmiar pojemnika nie pasuje dokładnie do wielokrotności tego fragmentu, na końcach może się pojawić tylko fragment rombu.
Wartość round daje na razie taki sam efekt, jak repeat.
Pomijamy w tym miejscu objaśnienie innych parametrów definicji.
Interpretacja: Firefox, Opera, Chrome.
