Kruhový obrázek

Někdy se může hodit mít na stránce obrázek kulatý, jaké existují možnosti?

Překreslení v grafickém editoru

Nejtrivialnější možnost je obrázek překreslit. Problém je, že to není moc universální (co až nebude kulatý vzhled žádoucí?).

Kulaté okraje (border-radius)

Od Internet Exploreru 9 lze použít CSS vlastnost border-radius. Stačí ji nastavit buď v polovině šířky obrázku, nebo jako 50 %.

#obrazek {border-radius: 50%}

Překrytí obrázekm

Pro starší prohlížeče je funkční řešení vytvořit obrázek s průhledným kruhem unitř a původní obrázek takto překrýt.

HTML

<div class='prekryti'>
	<span></span>
	<img src='obrazek.png' width=100 height=100>
</div>

CSS

img {display: block;}
.prekryti {position: relative;}
.prekryti span {background: url(prekryt.png); width: 100px; height: 100px; position: absolute}

Ukázka