[CSS] Zaokrąglone rogi w każdej przeglądarce (cross-browser curved corners)

Data dodania wpisu: 28-05-2010

Jak w prosty sposób zaokrąglić rogi dowolnego elementu, bez używania takich bibliotek jak jQuery.corners? Wystarczy kawałek kodu CSS;)

.ramka{border:1px solid #ff0000;padding:10px;margin:10px;background:#fff;}
.zaokraglona-ramka{
-moz-border-radius:5px; /* FF */
-webkit-border-radius:5px; /* przeglądarki z webkitem (Safari, Chrome itp.) */
-khtml-border-radius:5px; /* przeglądarki typu K-meleon (typowo Linuxowe) */
border-radius:5px; /* pozostałe przeglądarki */
behavior:url(border-radius.htc); /* dodatek dla badzIEwnej przeglądarki */
}

Żeby zaokrąglone rogi działały w badzIEwiu, wystarczy dodatkowo załączyć plik border-radius.htc autorstwa Remiza Rahnasa, który można pobrać z Google Code. Przykład:

Tutaj mamy jakiś tekst w zaokrąglonej ramce;)

Jeżeli chcemy zaokrąglić jedynie wybrane rogi lub każdemu z nich nadać inny poziom zaokrąglenia, do każdej z reguł można dopisać odpowiednio "topleft", "topright", "bottomleft", "bottomright", np.:

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:30px;
/* itd... */

Efekt działa w: Safari 3+, Mozilla FF 3+, Google Chrome 3+, K-meleon 1.5+, IE6/7/8. Nie testowałem działania w Operze 10, bo nie zebrało mi się jeszcze na instalkę. Mam 9.64 i w tej wersji nie działa;)

 

EDIT, 21.07.2010:

W sieci można wyszperać znacznie lepsze rozwiązanie dla zaokrąglonych rogów w kIEpskim, niż plik HTC;)

Tym skryptem jest rozwiązanie zaproponowane przez Drew Dillera - DD_Roundies. Jest to rozwiązanie w pełni stosujące reguł HTML/CSS, działające w każdej przeglądarce jaką znam. Pełny opis wraz z downloadem można znaleźć na stronie webdevelopera Drew Dillera - dillerdesign.com.

 

EDIT, 09.01.2013:

Bardzo późny update w stosunku do czasu, w którym zaistniało to rozwiązanie, ale niemal wszystkie bolączki z popularnymi efektami CSS3 załatwi CSS3 Pie.
Uwaga: nie działa poprawnie dla elementów z nadanym atrybutem position: absolute;

Komentarze

Wiem ,że to pewnie głupie pytanie, ale jak wstawić ten skrypt do kodu tabeli ? <table style="skrypt"> czy jak? Przepraszam za kłopot, ale tego nie rozumiem, a zaokrągląnych rogów w tabeli (na której oparta jest strona) bardzo potrzebuję.
Dowolne definiowanie zaokrąglenia każdego z rogów oddzielnie działa wyłącznie na starszych wersjach FF (3.6.28 - na niej się kończy). Pozostałe (Nowsze FF, Chrome, Opera, Safari, IE 9+) pokazują wszystkie rogi zaokrąglone jednakowo.
niby fajne, ale nie działa w Chromie i Safari dla elementów z pozycją relative, a moje takie być muszą ;(
Jasne, że wkradł się chochlik. :-) Dzięki Jędrzej za zwrócenie uwagi - nie mam pojęcia, jak mogłem to przeoczyć podczas pisania tego postu (kawał czasu temu - swoją drogą:-))
Nie powinno być zamiast behaviour czasem behavior???

Drogi autorze proponuję poprawić wpis.

Pozdrawiam.
Kopernik-dziękuję. Tej podpowiedzi szukałam.
Witam. Miałem problemy podobnie jak większość, ale plik css3 PIE.htc okazał sie bardzo pomocny.
Po pierwsze : position: relative, a po drugie div w którym jest to zastosowane, powinien mieć z-index wyższy, niż inne divy np. ogólny zbiornik, ponieważ może znikać tło naszego div-a, oto przykład : div.container { z-index:0;}, a nasz div.top {z-index:1; position:relative;}, no i oczywiście nasz plik .htc div.top {behavior: url(css/ie-css3.htc;}
Spróbujcie w ten sposób, powinno pomóc. Pozdrawiam.
Czy może ktoś wyjaśnić mi dlaczego nie ma efektu pod IE w wersji niższej niż 9? Plik 'border-radius.htc' mam ściągnięty i jest w tym samym folderze co str z kodem źródłowym.
Przy okazji - zaokrąglanie nie zadziała nawet pod IE9 jeśli nie będziemy mieć wpisane na str ' <!DOCTYPE html>'
Autor nie wspomina, że czerwoną ramkę po IE7,IE8 i tak wyświetla za pomocą DD_Roundies (java script). Niestety DD_Roundies przy bardziej powiedzmy "zagnieżdżonych" kontenerach potrafi skutecznie zawiesić IE. Osobiście polecam css3 PIE.htc. Projekt skuteczny dla <IE9. Dodatkowo w artykule wypadało by zwrócić uwagę na obsługę plików .htc przez web serwer czyli np dla Apacha musimy dodać AddType text/x-component .htc. Nie którzy mogą się nieżle nagłowić dlaczego .htc nie działa:)
Miło, że CSS daje takie możliwości.
Bardzo się ciesze, że zapominam już boje jak kiedyś osiągałem takie efekty przez gify czy png.

Dzięki za wpis.
po co piszesz na blogu porady skoro one nie działają i jeszcze idiotycznie masz ludziom za złe ze nie wiedzą jak twoje porady stosować. słabe te porady dajesz i tyle.
Dzięki za ciekawy skrypt. Zaraz będę testował pod ie.
Tego właśnie szukałem dzięki wielkie.
Marek chyba Cię posrało robić stronę pod IE7 szkoda ze nie robisz pod IE6 !!!
jak się stosuje z głową to zadziała :)
Ale jak się wkleja link do tej strony do IE to rogi w przykładzie nie są zaokrąglone. A jeśli trzeba zrobić to jakoś inaczej to może wytłumaczysz? To jest fajna alternatywa dla przezroczystych pingów dlatego fajnie jakby to działało we wszystkich przeglądarkach - nawet tych skrajnych.
DD_roundies działa dla każdego IE, bez wyjątku. Ale jak ktoś myśli, że wystarczy wrzucić skrypt, a potem rzuca gównami, to trudno.
Gówno prawda pod IE 7 nie działa mimo hacku
Comments closed...

DesignEnd na Facebook'u

Inspiration