W sytuacji kiedy znudziły nam się standardowe ramki w CSS3, a równocześnie chcielibyśmy żeby były one zgodne z Responsive Web Design niezastąpioną funkcją CSS3 jest BORDER-IMAGE, który umożliwia wykorzystanie osobnego pliku jako ramki. Najważniejszą zaletą tej funkcji jest fakt, że przy rozszerzaniu rogi ramki się nie skalują czyli dany element nigdy nie straci na jakości.

Przykładowa ramka, którą wykorzystam (w oryginale nie posiada ona widocznych czerwonych linii):

Border-image responsywne ramki

Odcinając rogi (zaznaczone kolorem czerwonym) otrzymamy bardzo interesujący efekt.

Border-image efekt

Gdyby środkowa część powyższej ramki była przeźroczysta to kolor tekstu oraz tło mogłoby być dowolnie dobrane. Użycie tego stylu polega na określeniu odcięć ze wskazanego obrazu. Wskazane rogi nie będą zmieniane przy skalowaniu strony, a zmieniana będzie jedynie środkowa część poprzez powielanie lub rozciąganie (w zależności od wybranej opcji):

BORDER- IMAGE: URL(„obrazek.png”) A1 A2 A3 A4 repeat repeat;
  • A1, A2, A3, A4 – liczba pikseli lub procent dla odcięcia danego rogu;
  • Repeat – powielanie obrazu
  • Stretch – rozciąganie obrazu
  • Round – efekt podobny do repeat, część powielana, a część skalowana

Finalny kod w tym konkretnym wypadku zapisany jest poniżej, warto zwrócić również uwagę na fakt, że wymaga on używania prefiksów CSS.

border-width: 144px 151px 136px 144px;
-moz-border-image: url(obrazek.png) 144 151 136 144 stretch;
-webkit-border-image: url(obrazek.png) 144 151 136 144 stretch;
-o-border-image: url(obrazek.png) 144 151 136 144 stretch;
border-image: url(obrazek.png) 144 151 136 144 fill stretch;

Naturalnie ramkę można odpowiednio zoptymalizować, żeby plik którego używamy nie był tak duży, a dodatkowo użycie pliku PNG z częściowo przezroczystością daje bardzo ciekawe rezultaty.