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 | Podaje adres grafiki będącej obramowaniem |
| Dziedziczenie | nie |
| Wartości | adres URL |
| Wartość domyślna | brak |
| Przykład | border-image-source: url(grafika.png); |
| Składnia JavaScript | object.style.borderImageSource="url(grafika.png)" |
Aby wskazać adres, należy wpisać w definicji stylu border-image-source: url(grafika.png);
Stylu tego w kanonicznej postaci W3C nie obsługuje obecnie żadna przeglądarka - trzy przeglądarki, Firefox, Chrome i Opera, posługują się zmodyfikowaną wersją adresu i konieczne jest użycie prefiksów -moz-, -webkit- i -o-, np.:
border-image: url(http://www.w3.org/TR/css3-background/border.png); -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png); -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png); -o-border-image: url(http://www.w3.org/TR/css3-background/border.png);
Jak widać, jest ona skrócona o człon -source.
Grafika będąca obramowaniem powinna być plikiem w fomacie PNG, w którym część niewypełniona obrazem jest przezroczysta. Przykładem jest grafika dostępna w W3C.
Przykładowy kod:
-moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 stretch;
użyty w definicji pojemnika spowoduje, że grafika ta będzie stanowiła obramowanie. Użyjmy jej w dwóch pojemnikach o różnych wymiarach:
Możemy tworzyć zresztą bardziej efektowne ramy:
Pomijamy w tym miejscu objaśnienie innych parametrów definicji.
Interpretacja: Firefox, Opera, Chrome.
