CSS3 rounded corners pro všechny prohlížeče? Jde to i bez bolehlavu!

Pojďme se zaměřit na často kladenou otázku.. chceme mít na webu zaoblené rohy a to ve všech prohlížečích. Avšak všechny prohlížeče zaoblené rohy udělat neumějí.

Největším problémem pro kodéra nejsou moderní prohlížeče, které perfektně zvládají nové implementace CSS3, ať už v čisté podobě a nebo v podobě vlastní (vendor-prefixy).

Takže nejhorší bude vyřešit trable u Internet Exploreru (IE). Proto si vezmeme na pomoc malého pomocníka. Rychlé a bezbolestné řešení se nazývá Curvy corners. Pomocí tohoto JavaScriptového kódu dokážeme vytvářet zaoblené rohy i pro Internet Explorer.

Přitom použití je velmi jednoduché, stačí následovat jednoduché schéma.

Do části HEAD připojíme JavaScript s CurvyCorners

<script type="text/javascript" src="curvycorners.js"></script>

Definujeme standardní CSS

.roundedCorners
{
  width: 220px;
  padding: 10px;
  background-color: #DDEEF6;
  border:1px solid #DDEEF6;
  
  /* css již v základu pro Safari, Firefox a Chrome */
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

A do hlavičky stránky definujme následující kód:

<script type="text/JavaScript">
  addEvent(window, "load", initCorners);
  function initCorners() 
  {
    var setting = 
    {
      tl: { radius: 6 },
      tr: { radius: 6 },
      bl: { radius: 6 },
      br: { radius: 6 },
      antiAlias: true
    }
    curvyCorners(setting, ".roundedCorners");
  }
</script>

tl, tr, bl, br znamená: top-left, top-right, bottom-left, bottom-right.

Pokud byste potřebovali definovat více radiusů a nebo vytvořit různé škály ve vašich CSS, potom uvítáte následující možnosti:

...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...

Nakonec zapíšeme HTML v následujícím tvaru:

<div class="roundedCorners"></div>

Pokud vás toto řešení zaujalo, pokračujte a můžete si celý JavaScript stáhnout přímo u zdroje.

Stahujte Curvycorners

AKTUALIZOVÁNO: Pro nedostupnost zdroje vystavíme poslední dostupnou verzi ke stažení přímo od nás. Curvycorners.js download