Splněný sen všech webdesignerů – kulaté rožky všude :-)

Zdánlivě nemožné se stává skutečností, nyní již lze pohodlně ve všech důležitých prohlížečích vytvořit kulaté rohy bez obrázku nebo jakéhokoliv JavaScriptu! Ano, možná si říkáte, že jsem objevil Ameriku, ale není tomu tak.

Poměrně nedávno v červenci 2009 bylo představeno řešení pomocí htc souboru pro IE6+ které zvládá zakulatit všechny rohy (pouze). A zásadní zvrat nastal na konci února 2010, kdy byla vydána finální Opera 10.5, která již zvládá CSS3 border-radius . Když k tomu přidáme, že prohlížeč Firefox a rodina browserů založená na jádře webkit (Chrome a Safari) již zvládá border-radius dlouho. Získáme podporu minimálně 95% návštěvníků.

Které prohlížeče nyní zvládnou kulaté rohy?

  • Internet Explorer 6, 7, 8
  • Firefox
  • Google Chrome, Safari
  • Opera 10.5

Jak vypadá zápis?

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
behavior:url(border-radius.htc);

Demo si můžete stáhnout



Komentáře

  1. Senior 22.03.10 12:30

    Comment Arrow

    Jen doplňující info, že plánovaný IE9 už tohle všechno bude umět. Jen kdybychom nemuseli za sebou táhnout ty všechny předešlé verze.....


  2. Pavel Ungr 09.05.10 11:45

    Comment Arrow

    Našel jsme tenhle návod na Google když jsem se mořil s kulatými rohy pomocí obrázků. Díky moc, zachránilo mi to spoustu nervů a času.


  3. Jakub Hejda 20.07.10 10:27

    Comment Arrow

    A nevíte jak docílit zaoblení rohů i u obrázků (element img).
    Firefox ok, ale v exploreru nefunguje.

    Díky


  4. robert 09.11.10 05:12


  5. spirit 14.01.12 11:31

    Comment Arrow

    htc snad není javascript?




O autorovi

Pari

Vítejte na mém blogu, rád bych se v krátkosti představil. Je mi 26 let. Momentálně nejvíce času věnuji projektu Lepime.cz - obchod se samolepkami na zeď a tvorbě webů postavených na redakčním systému Drupal pod značkou MEPA.CZ.