0251 / 590 837 15
info@a-coding-project.de

Border Radius Generator

Runde Ecken mit Border-Radius

Hat man früher runde Ecken grafisch gelöst und für jede Ecke einen div-Tag benötigt, ist es Webentwicklern nun möglich, runde Ecken mittels CSS3 zu realisieren.

Über den CSS-Eintrag "border-radius" können alle vier Ecken gleichzeitig im gleichen Radius gekrümmt werden. Der Radius wird dabei mit einem festen Wert oder in Prozent angegeben. Es ist zudem möglich, jede Ecke einzeln zu formatieren, beispielsweise mit "border-top-left-radius".

Bisher unterstützen die Browser Chrome und Safari (jeweils ab Version 5) und Opera (ab Version 10.5) Border-radius. Gemäß der Preview-Version wird auch der Internet-Explorer 9 Border-radius interpretieren können.

Mozilla-Browser benötigen derzeit noch den -moz-Präfix zur Umsetzung. Die Schreibweise wäre dann zum Beispiel -moz-border-radius-topleft anstatt des reinen CSS-Eintrages border-top-left-radius.