Stil mit {stil}

Die schlichte CSS-Eigenschaft border wird zum Leidwesen vieler Webdesigner erst in CSS3 um die Eigenschaft border-radius erweitert. Bis dahin müssen wir mit kleinen Bildchen die Ecken im Layout einer Webseite per Handarbeit rund biegen. Immerhin: Beim fieldset darf abgerundet werden.

Firefox und Safari haben die Eigenschaften border-radius für abgerundete Kofferecken – rounded corners – ja bereits im Untergrund implementiert. Allerdings braucht die Eigenschaft noch einen Präfix, damit die runden Ecken mit CSS ans Tageslicht kommen:

-moz rundet die Ecken in Firefox ab
-webkit in Safari und in Google Chrome

In Internet Explorer und in Opera hingegen bleiben die Ecken so wie sie immer waren: eckig. Aber! Verleiht Internet Explorer 7 dem fieldset-Tag nicht diese kleinen runden Ecken? Das schaffen Firefox und Safari mit ihrem Präfix auch.

fieldset {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

Sobald für border eine Farbe definiert wird, wird das fieldset in Internet Explorer wieder eckig. Wer trotzdem auf runden Ecken in Firefox und Safari besteht, kann die Farbe für die CSS-Eigenschaft border im HSL-Farbmodell festlegen:

border-color: hsl(360,100%,35%);

Dann hat das fieldset einen roten abgerundeten Rahmen im Firefox und Safari, in IE 7 bleibt der fieldset-Rahmen rund, wenn auch weiterhin silbergrau.