Abgerundete Ecken mit CSS: border-radius

Datum 14. April 2009 - 16:33 | Autor verfasst von: Blog-Experiment | Kommentare Kommentare: 5 Kommentare

Wer das WordPress-Dashboard im Firefox oder Safari-Browser besucht, der wird im Menü schön angerundete Ecken vorfinden, während beispielsweise bei der aktuellen Opera-Version die eckige Version zu sehen ist.

Was hat es damit auf sich?

In der Vergangenheit hat man solche Effekte oftmals mit kleinen Grafiken zustande gebracht. Das ist allerdings ziemlich umständlich und treibt zudem auch die Ladezeit der eigenen Webseite unnötig in die Höhe.

Ab CSS3 (CSS3-Roadmap von w3.org – englisch), das momentan noch nicht Standard ist, soll es eine neue Funktion “border-radius” geben. Bereits heute gibt es Spezialbefehle für Mozilla Firefox sowie die auf Webkit basierenden Browser wie Safari. Allerdings leider keinen einheitlichen, so dass es auch momentan noch etwas mehr Arbeit ist, das ganze einzubinden. Wirklich kompliziert allerdings nicht.

Anwendungsbeispiel

1. Zunächst legen wir ein neues Element an. Dies kann beispielsweise ein Div-Container, aber auch ein beliebiges anderes HTML-Element sein.

Beispiel:

<div class="roundborder">
Abgerundeter Rahmen mit CSS: 5px
</div>

2. Diese Klasse sprechen wir in einer eigenen CSS-Datei. Wie man eine solche einbinden kann, habe ich vor kurzem in einem eigenen Artikel beschrieben.

Dieser Elementklasse ordnen wir nun erstmal einen Rahmen zu:

.roundborder {
    padding: 5px; /* Sorgt für Innenabstand von 5px */
    border: 2px solid black; /* Erzeugt einen schwarzen Rahmen mit durchgehender Linie */
}

Das Ergebnis wird dann wie folgt aussehen:

css-border

3. Nun kommen wir zu den eigentlichen Spezialbefehlen:

-moz-border-radius: 5px;

Spezialbefehl für Mozilla Firefox.

-webkit-border-radius: 5px;

Spezialbefehl für Safari, Konquerer.

border-radius: 5px;

CSS3-Spezifikation

Wer alle Befehle auf einmal einsetzt, dürfte auf der sichersten Seite sein. Alle Browser, die diese Befehle nicht unterstützen, werden nur eckige Kästen anzeigen.

4. Der Beispielcode insgesamt sieht dann so aus:

.roundborder {
    padding: 5px;
    border: 2px solid black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width:300px;
}

Hier ein paar Beispiele für unterschiedliche Radien:

css-border-radius-10px

Border-Radius: 10px;

Border-Radius: 5px;

Border-Radius: 5px;

Border-Radius: 100px;

Border-Radius: 100px;

Einzelne Ecken gesondert ansprechen

  • oben links (topleft):
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius: 5px;
    css-border-radius-5px-topleft
  • oben rechts (topright)
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius: 5px;
    css-border-radius-5px-topright
  • unten links (bottomleft):
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius: 5px;
    css-border-radius-5px-bottomleft
  • unten rechts (bottomright):
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius: 5px;
    css-border-radius-5px-bottomright

Natürlich kann man dies auch entsprechend kombinieren, also beispielsweise nur die rechte obere und die linke untere Ecke abrunden.



Hat dir dieser Artikel gefallen? Abonniere doch unseren RSS-Feed und bleibe über alle weiteren Updates auf dem Laufenden!


Schlagwörter:

Zuletzt aktualisiert am 14. April 2009

Trackback-URI: | Gepostet in CSS-Wissen, Tipps & Tricks



5 Kommentare zu “Abgerundete Ecken mit CSS: border-radius”

  1. Sergej Müller sagt:
    14. April 2009 um 23:00

    Solange IE diese Eigenschaften nicht unterstützt, halte ich den Eisatz dieser Technik für fragwürdig. Vielleicht bei Hobby-Projekten, bei professionellen Projekten sollen die Layouts schon auf den aktuellen Browsern gleich aussehen, vor allem wenn man es fürs Auge macht.

  2. Antu sagt:
    15. April 2009 um 01:51

    Schau mal hier: http://www.smileycat.com/miaow/archives/000044.php

    Da finden sich einige Anleitungen zu dem Thema, und auch Lösungen für den IE (mit Bildern).

    Übrigens: Bin ich der einzige bei dem das Bewerten des Artikels nicht funktioniert? Wenn ich auf die Sterne klicke passiert einfach nichts.

  3. Blog-Experiment sagt:
    16. April 2009 um 09:26

    @Sergej: wenn es wirklich um pixelgenaue Darstellung geht, ist der Einsatz natürlich nicht zu empfehlen. Das 100%ig identische Aussehen auf allen Browsern ist aber immer leicht problematisch – man denke nur, an die unterschiedliche Interpretation von margin und padding in Bezug auf die Gesamtbreite eines Elements.
    Wenn es also nicht um absolut pixelgenaue Darstellung geht, macht es für mich am meisten Sinn mich darauf zu beschränken, dass es in allen Browsern sauber angezeigt wird.
    Solange ich die Abrundungen alle auf einheitlichem Wege vornehme, sollte das Ergebnis am Ende auch entsprechend einheitlich sein – entweder alles komplett abgerundet, was ich entsprechend so darstellen will, oder aber eben alles eckig.

    @Antu: da scheint in der Tat, was mit dem Plugin nicht ganz zu funktionieren. Ich werde das überprüfen. Vielen Dank für den Hinweis.

  4. Uwe sagt:
    8. Mai 2009 um 16:11

    In der WordPress 2.7.1 Version wird dieses Methode für den Rand um die Bilder angeboten. Im Fox erscheinen die Ecken rund, im IE6 und IE7 sind sie eckig. Beides sieht aber richtig gut aus.

  5. Martin sagt:
    3. Februar 2011 um 10:51

    Mittlerweile verwende ich die Angaben zur Umsetzung von Rundungen und ignoriere den IE. Mit der Version 9 vom Internet-Explorer klappt dies dann auch und die Rundungen werden angezeigt.

    Zusätzlich würde ich aber immer noch die CSS Angaben wie z.B.
    border-bottom-right-radius:5px;
    für die Ecke unten rechts angeben. Damit versteht es jetzt schon der Opera.

Hinterlasse eine Antwort