CSS/Eigenschaften/äußere Gestaltung/Rahmen/border-radius

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können für ein Element mit der Eigenschaft border-radius den Radius bestimmen, mit dem die Ecken abgerundet werden. In Verbindung mit Rahmendicke, Rahmentyp und Rahmenfarbe wird eine entsprechende abgerundete Rahmenlinie gezeichnet. Der Hintergrund des Elements wird entlang der Kurve abgeschnitten, auch wenn keine sichtbare Rahmenlinie vorhanden ist.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • CSS 3.0

alle Ecken eines Elements[Bearbeiten]

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>border-radius</title>
    <style>
      .roundedCorners   { border-radius: 2em; }
      .ellipsis         { border-radius: 4em/1em; }
      .differentCorners { border-radius: 4em 3em 2em 1em; }
      .background       { border-radius: 2em; border: none; background-color: #0c0; }
    </style>
  </head>
  <body>
    <p class="roundedCorners">Textabsatz mit vier gleichen abgerundeten Ecken.</p>
    <p class="ellipsis">Textabsatz mit elliptisch abgerundeten Ecken.</p>
    <p class="differentCorners">Textabsatz mit vier verschieden abgerundeten Ecken.</p>
    <p class="background">Textabsatz mit Hintergrundfarbe, aber ohne sichtbare Rahmenlinie.</p>
  </body>
</html>

Mit border-radius: können Sie den Radius der Abrundung für ein Element angeben. Erlaubt ist ein Paar numerischer Angaben.

Die Angabe eines Wertepaares erzeugt eine elliptische Abrundung, wobei der erste Wert für die horizontale und der zweite Wert für die vertikale Halbachse steht. Eine Prozent-Angabe für die horizontale Halbachse bezieht sich auf die halbe Breite des Elements, eine Prozent-Angabe für die vertikale Halbachse auf die halbe Höhe. Wird nur ein Wert angegeben, so entsteht eine kreisförmige Abrundung. border-radius: 1em; ist identisch zu border-radius: 1em/1em;

einzelne Ecken eines Elements[Bearbeiten]

Um für einzelne Seiten des Elements mit der Eigenschaft border-radius eine unterschiedliche Rahmendicke zu bestimmen, beachten Sie folgende Regeln:

  • Eine Angabe: für alle vier Ecken gilt derselbe Wert
  • Zwei Angaben: 1. Wert für oben-links und unten-rechts, 2. Wert für oben-rechts und unten-links
  • Drei Angaben: 1. Wert für oben-links, 2. Wert für oben-rechts und unten-links, 3. Wert für unten-rechts
  • Vier Angaben:1. Wert für oben-links, 2. Wert für oben-rechts, 3. Wert für unten-rechts, 4. Wert für unten-links
Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

Außerdem können Sie entsprechende Werte für

  • border-top-right-radius, definiert die Abrundung für oben rechts,
  • border-bottom-right-radius, die Abrundung für unten rechts,
  • border-bottom-left-radius, die Abrundung für unten links und
  • border-top-left-radius, die Abrundung für oben links

angeben.

Rückblick: Runde und andere Ecken für skalierbare Boxen im Jahre 2004[Bearbeiten]

Heute ist fast schon vergessen, dass noch vor ein paar Jahren abgerundete Ecken nur unter großen Verrenkungen erreicht werden konnten: Der Selfhtml-aktuell-Artikel Runde und andere Ecken für skalierbare Boxen von Andreas Kalt vom 05.02.2004 zeigt, wie man eine skalierbare Box mit grafischer Umrahmung mittels mehrerer divs und Hintergrundgrafiken gestalten musste, um den gleichen Effekt wie mit border-radius zu erzielen.

Erst 2011 zog mit dem IE9 auch der letzte große Browser-Hersteller nach und unterstützte die border-radius-Eigenschaft.

Weblinks[Bearbeiten]