CSS border-radius-Eigenschaft

Definition und Verwendung

Das border-radius-Attribut ist eine Abkürzung, die verwendet wird, um die vier border-*-radius-Attribute zu setzen.

Tipp:Diese Eigenschaft ermöglicht es Ihnen, abgerundete Kantenbögen für das Element hinzuzufügen!

Siehe auch:

CSS3-Tutorial:CSS3 Ränder

Beispiel

Fügen Sie dem div-Element abgerundete Kantenbögen hinzu:

div
{
border:2px solid;
border-radius:25px;
}

Probieren Sie es selbst aus

Am Ende der Seite gibt es mehr Beispiele.

CSS-Syntax

border-radius: 1-4 length|% / 1-4 length|%;

Anmerkung:Setzen Sie in dieser Reihenfolge die vier Werte jeder Radius. Wenn bottom-left weggelassen wird, ist es gleich top-right. Wenn bottom-right weggelassen wird, ist es gleich top-left. Wenn top-right weggelassen wird, ist es gleich top-left.

Attributswert

Wert Beschreibung Test
length Definieren Sie die Form der Ecken. Test
% Definieren Sie die Form der Ecken in Prozent. Test

Beispiel 1

border-radius:2em;

äquivalent zu:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Beispiel 2

border-radius: 2em 1em 4em / 0.5em 3em;

äquivalent zu:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Technische Details

Standardwert: 0
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: object.style.borderRadius="5px"

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die die Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5