Okrągłe rogi (round corners) tylko za pomocą CSS

Seksowne krągłości są świetnym sposobem na podniesienie atrakcyjności wizualnej strony, dodatkowo w erze Web 2.0 są elementem niemal obowiązkowym. Okazuje się, że efekt ten bardzo prosto uzyskać TYLKO za pomocą CSS z wykorzystaniem właściwości border-radius, bez potrzeby wprowadzania zbędnego kodu HTML z podpiętymi grafikami tła.

Oczywiście takie rozwiązanie ma jedną wadę – nie zadziała w Internet Explorerze. Decyzję o tym, z jakiej metody zaokrąglania skorzystać należy więc podjąć indywidualnie w zależności od charakteru elementów layoutu. Jeśli dla danego elementu efekt zaokrąglenia jest absolutnie konieczny we wszystkich przeglądarkach – korzystamy ze [1] standardowych metod (czyli dodatkowy HTML i obrazki tła). Jeśli dany element nie jest kluczowy i jesteśmy w stanie zaakceptować jego kanciastość w IE – najwygodniej skorzystać z border-radius.

Generalnie natomiast należy unikać metod, w których zaokrąglone rogi uzyskiwane są z wykorzystaniem JavaScript – po co marnować moc obliczeniową procesora na efekt, który można osiągnąć tylko za pomocą CSS i HTML?

Zaokrąglamy wszystkie rogi

Poniższa klasa CSS nadaje zaokrąglenie o promieniu 20px wszystkim rogom danego elementu blokowego w Firefoxie, Safari, Chrome, Konquerorze i innych przeglądarkach, które implementują właściwość border-radius:

.okragle-wszystkie-rogi {
    -webkit-border-radius: 20px; /* Safari, Chrome */
    -khtml-border-radius: 20px;	/* Konqueror */
    -moz-border-radius: 20px; /* Firefox */
    border-radius: 20px;
}

Własności CSS rozpoczynające się od myślnika to tzw. rozszerzenia CSS przeglądarki (ang. CSS vendor extensions) czyli własności, których nie ma w obowiązujących specyfikacjach W3C, ale które oferowane są przez dany silnik renderujący. Dlatego też wykorzystanie tych niestandardowych własności sprawi, że nasz arkusz CSS nie przejdzie walidacji.

Zaokrąglamy tylko dwa rogi

Zamiast zaokrąglać wszystkie rogi, możemy wybrać które konkretnie mają podlegać zaokrągleniu. W poniższym przykładzie osiągamy ciekawy efekt zaokrąglając tylko prawy górny i lewy dolny róg:

.okragle-dwa-rogi {
    -webkit-border-top-right-radius: 20px; /* prawy górny */
    -webkit-border-bottom-left-radius: 20px; /* lewy dolny */
    -khtml-border-radius-topright: 20px;
    -khtml-border-radius-bottomleft: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-right-radius: 20px
    border-bottom-left-radius: 20px;
}

Co z Operą? SVG na ratunek!

Oglądając powyższe przykłady pod Operą czeka nas niemiłe rozczarowanie. Okazuje się, że (na razie) Opera nie wspiera właściwości border-radius w jakiejkolwiek formie. Na szczęście istnieje inny sposób na zaokrąglone rogi w tej przeglądarce. Począwszy od wersji 9.5 Opera umożliwia wykorzystanie pliku SVG jako tła elementu HTML (background-image). Możemy więc stworzyć plik SVG, który zawierał będzie prostokąt z zaokrąglonymi rogami. Wystarczy uruchomić Notatnik, wkleić poniższy kod i zapisać plik np. pod nazwą prostokat.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect fill="#ffcc00" x="0" y="0" width="100%" height="100%" />
    <rect fill="red" x="0" y="0" width="100%" height="100%" rx="20" />
</svg>

Po zapisaniu nowo utworzony plik możemy [4] obejrzeć w przeglądarce. Za pomocą tagów <rect> narysowaliśmy dwa prostokąty. Pierwszy z nich jest tłem naszego rysunku i powinien współgrać z tłem strony. Drugi to właściwy prostokąt z zaokrągleniami o promieniu 20px (parametr rx). Dzięki użyciu wartości procentowych w parametrach width i height nasz rysunek zmienia się w zależności od wielkości okna przeglądarki. Dzięki temu po przypisaniu jako tło do elementu HTML dopasuje się do jego rozmiarów:

.okragle-wszystkie-rogi {
    background-image: url(prostokat.svg); /* Opera */
}

Pójdźmy dalej i spróbujmy wygenerować plik SVG, w którym zaokrąglone są tylko dwa rogi: prawy górny i lewy dolny (tak jak w przykładzie 2). Niestety w SVG nie możliwości zdefiniowania zaokrąglenia konkretnego rogu tak jak robiliśmy to za pomocą CSS. Ale można to obejść w ten sposób, że przykryjemy niechciane zaokrąglenia normalnymi prostokątami:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect fill="#ffcc00" x="0" y="0" width="100%" height="100%" />
    <rect fill="red" x="0" y="0" width="100%" height="100%" rx="20" />
    <!-- prostokaty przykrywajace niechciane zaokraglenia -->
    <rect fill="red" x="0" y="0" width="50%" height="50%" />
    <rect fill="red" x="50%" y="50%" width="50%" height="50%" />
    <!-- prostokaty przykrywajace niechciane zaokraglenia -->
</svg>

Podsumowanie

Reasumując, gotowy kod na zaokrąglone rogi w CSS działający we wszystkich popularnych przeglądarkach oprócz IE wygląda następująco:

.okragle-wszystkie-rogi {
    background: url(prostokat.svg) no-repeat red; /* Opera */
    -webkit-border-radius: 20px; /* Safari, Chrome */
    -khtml-border-radius: 20px;	/* Konqueror */
    -moz-border-radius: 20px; /* Firefox */
    border-radius: 20px;
}

kminek.pl