CSS: runde Ecken ohne Grafik • CSS3 Generator

Runde Ecken im Webdesign stechen von der Masse ab. Nicht jeder hat runde Ecken bei seinen Elementen auf seiner Homepage integriert und viele wissen auch gar nicht, wie sie die abgerundeten Ecken umsetzen können. CSS3 ist die Antwort. Früher war es nur möglich runde Ecken über eine Grafik umzusetzen. In CSS3 geht es auch ohne Grafik. Für alle, die selbst in CSS nicht ganz so fit sind, gibt es einen Online Generator. So können runde Ecken ganz einfach und schnell für die eigene Webseite erstellt werden.

Anleitung für runde Ecken mit CSS ohne Grafik

Wer sich selbst gut mit CSS auskennt, der benötigt für runde Ecken den Code border-radius. Dahinter werden die gewünschten Größen für die runden Ecken geschrieben, beginnend mit oben links, weiter mit oben rechts, dann unten rechts und schließlich unten links: border-radius: 5px 6px 7px 8px. Dazu kommen die gleichen Werte für -moz-border-radius und -webkit-border-rasius, um die Umsetzung für ältere Browser zu gewährleisten. Das Ganze sieht dann z.B. so aus:

border-radius: 5px 6px 7px 8px;
-moz-border-radius: 5px 6px 7px 8px;
-webkit-border-radius: 5px 6px 7px 8px;

Wird nur ein einziger Wert für die Größe der runden Ecken angegeben, bezieht er sich auf alle 4 Ecken.

Wem diese manuelle Umsetzung zu schwierig oder umständlich ist, der kann auf den Online Generator für runde Ecken zurückgreifen. Online ganz einfach die gewünschten Einstellungen treffen, Code kopieren und fertig. Nachfolgend eine Anleitung, wie dieser Generator für runde Ecken ohne Grafik mit CSS zu bedienen ist:

Anleitung runde Ecken mit dem CSS3 Generator

Der Generator für runde Ecken mit CSS ist ganz einfach zu bedienen. Oben ist ein Vorschau Fenster (Preview), welches das optische Ergebnis anzeigt, welches mit den individuellen Einstellungen getroffen wurde.

Größen für runde Ecken einstellenDarunter im Bereich der Options, können die individuellen Einstellungen für die runden Ecken getroffen werden. Bei aktiviertem „All Corners“ Fenster erhält das Element an allen vier Seiten runde Ecken, in der gewählte Breite (z.B. 6px).

Wer stattdessen nur an einer, zwei oder gar drei Seiten runde Ecken haben möchte oder die Abrundung der Ecken an einigen Seiten unterschiedlich stark, der wählt hier die „Custom Corners“. Hier können für die Ecken oben links, oben rechts, unten links und unten rechts jeweils individuelle Größen eingegeben werden.

Farben und Rand für die runden Ecken in CSS

Aber nicht nur die Ecken selbst, können mit dem Generator individuell eingestellt werden, sondern es sind auch die Einstellungen für die Breite, den Stil und die Farben der Ränder des Elements möglich.

Nachdem die individuell gewünschten Einstellungen für die runden Ecken ohne Grafik getroffen wurden, das Ergebnis in der Vorschau zufriedenstelltend ist, braucht ganz einfach nur der entsprechende CSS Code, den der Generator erstellt hat, in den eigenen Online Stylesheet für das jeweilige Element übernommen werden. Und schon sieht das Ergebnis auf dem Bildschirm für die eigene Webseite genauso aus wie es der Generator in seiner Vorschau anzeigt.

Runde Ecken in CSS

Als zusätzliches Feature zeigt der CSS3 Generator für runde Ecken unterhalb der Einstellungsmöglichkeiten und des Codes an, von welchen Browsern die Einstellung unterstützt wird. Nicht alle Browser unterstützen CSS3, vor allem nicht ältere.

Fazit: Runde Ecken in CSS umzusetzen ist mit diesem CSS3 Generator ein Kinderspiel. Auch wer in CSS geübt ist, wird Gefallen daran finden, da die Vorschau das jeweilige Erscheinungsbild der runden Ecken zeigt und so mühsames Ausprobieren der Vergangenheit angehört.