Box mit abgerundeten Ecken

border-radius rundet die Ecken von HTML-Boxen ab. Die CSS-Eigenschaft border muss nicht gesetzt werden, um Ecken durch border-radius abzurunden.

Mit border-radius gelingt dann auch endlich ein Kreis mit CSS ohne Hintergrundbild.

Die einfachste Form, runde Ecken für ein Element festzulegen, ist die Kurznotation border-radius:

border: 1px solid #000000;
background: #e7e7e7;
-moz-border-radius: 5px 15px 10px 30px; /* firefox */
-webkit-border-radius: 5px 15px 10px 30px; /* chrome, safari */
-khtml-border-radius: 5px 15px 10px 30px; /* konqueror */
border-radius: 5px 15px 10px 30px; /* css3 */
behavior: url('border-radius.htc');

Kreis

background-color: #e7e7e7;
border: 1px solid #000000;
-moz-border-radius: 50px; /* Firefox */
-webkit-border-radius: 50px; /* Chrome, Safari */
-khtml-border-radius: 50px; /* Konqueror */
border-radius: 50px; /* CSS3 */
behavior: url(border-radius.htc); /* Internet Explorer */
width: 100px;
height: 100px;