CSS: "border-radius"

CSS: "border-radius"

Definition

Status: Aktueller Standard

Das Property "border-radius" steht für border-radius (Rahmen(ecken)-Radius).

Die CSS-Eigenschaft "border-radius" wird verwendet, um die Ecken eines Elements abzurunden. Dabei wird ein (unsichtbarer) Kreis oder eine Ellipse an die Ecke gelegt, deren Kurve den Rahmen formt. Es ist eine Shorthand-Property für die vier einzelnen Ecken (Bei einem Wert gilt dieser für alle vier Ecken, bei zwei Werten gilt der erste für "oben-links" und "unten rechts", bei drei Werten gilt der erste Wert für "oben-links", der zweite Wert für "oben-rechts" und der dritte Wert für "unten-rechts". Bei vier Werten gilt die Reihenfolge "oben-links" - "oben-rechts" - "unten-rechts" - "unten-links".

Es kann jede Ecke auch direkt definiert werden:

border-top-left-radius (Ecke oben links)
border-top-right-radius (Ecke oben rechts)
border-bottom-left-radius (Ecke unten links)
border-bottom-right-radius (Ecke unten rechts)

Syntax

Selektor {border-radius: option}

Optionen

Pixel

Radius wird in Pixel (px) angegeben. Werden zwei Werte mit "\" getrennt übergeben (erst horizontaler, dann vertikaler Radius) wird eine Ellipse gebildet (border-radius: 50px / 20px;)

Prozent

Angabe prozentual zur Elementgröße. Bei 50% der Elementgröße ist das Ergebnis ein Kreis

Syntax

Selektor {border-radius: option}

Beispiele

= Tag

= Selektor

= Wert

Wichtig!

= Wichtig!

Beispiel border-radius : Diverse Radius-Parameter verwendet:""

Der Code:

<style>
  img {
      width: 200px;
      height: auto;
      border: 1px black solid;
    }

    #pic2 {border-radius: 80px/40px;}
    #pic3 {border-radius: 80px;}
    #pic4 {border-radius: 50%;}
    #pic5 {border-radius: 50% 20px 10px;}

  </style>
  
  <img src="avatar.gif" alt="avatar" id="pic1">
  <img src="avatar.gif" alt="avatar" id="pic2">
  <img src="avatar.gif" alt="avatar" id="pic3">
  <img src="avatar.gif" alt="avatar" id="pic4">
  <img src="avatar.gif" alt="avatar" id="pic5">

Ergebnis:

Ergebnis: <border-radius>-Demo 1
Diverse Radius-Parameter verwendet:

Anmerkungen

Wenn zwei Zellen unterschiedliche Rahmenstile haben (z. B. verschiedene Farben oder Dicken) und collapse aktiv ist, entscheidet der Browser nach festen Prioritätsregeln, welcher Rahmen gewinnt (meist der dickere oder auffälligere)

Die Eigenschaft "border-spacing" funktioniert nur, wenn "border-collapse: separate" eingestellt ist. Bei "collapse" verschwindet dieser Zwischenraum komplett

Die Eigenschaft "border-radius" funktioniert bei Tabellen oft nicht zuverlässig, wenn "border-collapse: collapse" verwendet wird; hierfür ist meist "separate" erforderlich.