Runde Ecken – wie? | 21.08.2010

von Ame

Wie werden die Runden ecken mit Hilfe von CSS gecodet, die man beispielsweise in diesem Layout erkennen kann? Genau das werde ich euch mit diesem Tutorial erklären. Man kann sowohl Textareas, Inputs und Selects mit runden Ecken versehen, als auch normale Links in der Navigation. Hierbei muss nur folgender kleiner Code in der jeweiligen Klasse eingefügt werden.

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;

Ihr müsst unbedingt beachten, dass ihr alle drei Codes in euer Layout einfügt, denn sonst funktionieren eure runden Ecken nicht in jedem Browser – den Internet Explorer könnt ihr für diese allerdings schon von Anfang an vergessen! Die oben genannten Codeschnipsel bewirken, dass alle vier Ecken eines ‘Kastens’ oder ‘Links’ rund sind, die Pixelangabe ist dabei der Radius. Wenn ihr einzelne Ecken rund coden möchtet, müsst ihr folgendes vornehmen:

-moz-border-radius-topleft: 6px;
-webkit-border-radius-topleft: 6px;
-khtml-border-radius-topleft: 6px;

Jetzt ist nur die linke obere Ecke rund und zwar mit einem Radius von 6 Pixeln. Je nachdem, welche Ecken ihr rund haben wollt, könnt ihr auch noch topright, bottomleft und bottomright verwenden. Viel Spaß beim Ausprobieren und wenn es Probleme gibt, einfach an uns wenden. ;)