Jak zrobić zaokrąglone rogi w ramkach za pomocą CSS?

4

Na coraz większej ilości stron www stosuje się zaokrąglone rogi w ramkach. Przez lata webmasterzy wykonywali je za pomocą obrazków lub JavaScript. Istnieje jednak właściwość w  CSS3, która łatwo i szybko pozwala na osiągnięcie tego samego efektu.

cssAtrybut border-radius pozwala na zaokrąglenie rogu ramki. Dostępne tagi to border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius.

Składnia atrybutu może być taka:

border-radius: TL TR BR BL;
border-radius: TL BL+TR BR;
border-radius: TL+BR TR+BL;
border-radius: ALL;

TL = top left,  BR – bottom right, itd.

Z uwagi na to, że standard CSS3 nie został jeszcze zatwierdzony przez organizację W3C i prace  nad nim wciąż trwają, jest problem z jego obsługą przez przeglądarki internetowe. Internet Explorer nie wspiera tego rozwiązania w żadnej postaci (nawet IE8). Na szczęście pozostali producenci wiodących przeglądarek obsługują zaokrąglanie rogów za pomocą CSS, tyle, że każdy w specyficzny dla siebie sposób. W efekcie do arkusza stylów strony www trzeba dodać klika wpisów (dla każdej przeglądarki). Poniżej przykład takiego wpisu:

border-radius: 25px; /* CSS 3 */
-moz-border-radius: 25px; /* Firefox */
-o-border-radius: 25px; /* Opera */
-icab-border-radius: 25px; /* iCab */
-khtml-border-radius: 25px; /* Konqueror */
-webkit-border-radius: 25px; /* Safari */

4 KOMENTARZE

  1. Obecnie problem z narożnikami w IE staram się olewać. Zawsze można zrobić kwadratowe przyciski które nadrabiają stylem i są ładnie stonowane ze stroną. A nie obciążać zbytnio pierdołami i js strony. Grunt by strona się wczytywała szybko, była zgodna ze standardami Ot co, tajemnica poliszynela.

    Oceń: Dobre 0 Słabe 0

  2. Border radius zdaje się działa tylko pod ff. A po co robić coś pod jedną przeglądarkę? Z CSS3 trzeba będzie jeszcze poczekać. Najczęściej stosuje się poprostu grafike na rogi…

    Oceń: Dobre 0 Słabe 0

Dodaj komentarz