Testování podpory vlastností border-radius (-moz-border-radius, -webkit-border-radius)

• Efekt zaoblených rohů (CSS3 vlastnost border-radius). Funguje všude kromě IE8. Ve Firefoxu také funguje "testovací" vlastnost -moz-border-radius (viz třetí a čtvrtý rámeček) a v Safari (a Google Chrome) vlastnost -webkit-border-radius (viz pátý a šestý rámeček).
  Zmíněné vlastnosti ale nefungují ve většině prohlížečů správně, pokud jsou použity dva parametry, místo toho, aby se rohy vykreslily do elipsy, je první hodnota použita na levý horní a pravý dolní roh a druhá hodnota na zbývající dva rohy. Správné zobrazení zaoblených rohů se dvěma parametry je pouze v Google Chrome a Safari vlastností -webkit-border-radius (viz šestý rámeček).
  Je také možné docílit zaoblení jen zvolených rohů objektu, např. levého horního, pak je deklarace border-top-left-radius: 15px;, resp. -webkit-border-top-left-radius: 15px; pro Safari a Chrome. Pro Mozillu je ale syntaxe poněkud odlišná: -moz-border-radius-topleft: 15px;.
  U obrázků fungují zaoblené rohy ve Firefoxu, Google Chrome a Safari, v Opeře až od verze 11.
  Explorer 8 zaoblené rohy nepodporuje vůbec, Explorer 9 již ale ano!
  
  <div style="border-radius: 15px"></div>
  <div style="border-radius: 15px 30px"></div>
  
  
  Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius).
  
  
  Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius).
  
  
  

  Zaoblené rohy pro Firefox

  <div style="-moz-border-radius: 15px"></div>
  <div style="-moz-border-radius: 15px 30px"></div>
  
  
  Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius).
  
  
  Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius).
  
  
  

  Zaoblené rohy pro Chrome a Safari

  <div style="-webkit-border-radius: 15px"></div>
  <div style="-webkit-border-radius: 15px 30px"></div>
  
  
  Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius).
  
  
  Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius).
  
  
  

  Zaoblené rohy ve všech moderních prohlížečích (kromě Exploreru 8)

  .radius
  { width:300px;
    border: 1px solid blue;
    padding: 10px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
  }
  
  <div class="radius"> </div>
  
  
  Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius). Efekt zaoblených rohů (CSS3 vlastnost border-radius).
  
  
  

  Zaoblené rohy u obrázku (zatím podpora ve Firefoxu, Chrome a Safari, v Opeře až od verze 11)