With the CSS border-radius property, you can give any element "rounded corners".
Das CSS Die Eigenschaft border-radius definiert den Radius eines Ecken des Elements.
Tipp: Mit dieser Eigenschaft können Sie abgerundete Ecken hinzufügen Elemente!
Hier drei Beispiele:
1. Abgerundete Ecken für ein Element mit einer bestimmten Hintergrundfarbe:
Rounded corners!
2. Abgerundete Ecken für ein Element mit Rand:
Rounded corners!
3. Abgerundete Ecken für ein Element mit Hintergrundbild:
Rounded corners!
Hier ist der Code:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
} Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>
Tipp: Die Eigenschaft border-radius ist eigentlich eine Abkürzungseigenschaft für border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius-Eigenschaften.
Die Eigenschaft border-radius kann eins haben auf vier Werte. Hier sind die Regeln:
Vier Werte - Randradius: 15px 50px 30px 5px; (erster Wert gilt für die obere linke Ecke, zweiter Wert gilt für die obere rechte Ecke, dritter Wert gilt für die untere rechte Ecke und vierter Wert gilt für die untere linke Ecke):
Drei Werte - Randradius: 15px 50px 30px; (der erste Wert gilt für die obere linke Ecke, der zweite Wert gilt für die obere rechte und die untere linke Ecke und der dritte Wert gilt für die untere rechte Ecke ):
Zwei Werte - Randradius: 15px 50px; (der erste Wert gilt für die oberen linken und unteren rechten Ecken und der zweite Wert gilt für die oberen rechten und unteren linken Ecken):
Ein Wert - border-radius: 15px; (der Wert gilt für alle vier Ecken, die gleichmäßig abgerundet sind:
Hier ist der Code:
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>
<p>Three values - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>
<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>
<p>One value - border-radius: 15px:</p>
<p id="rcorners4"></p>
</body>
</html>
Sie können auch elliptische Ecken erstellen:
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Elliptical border - border-radius: 50px / 15px:</p>
<p id="rcorners1"></p>
<p>Elliptical border - border-radius: 15px / 50px:</p>
<p id="rcorners2"></p>
<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners3"></p>
</body>
</html>
Eine Abkürzungseigenschaft zum Festlegen aller vier border-*-*-radius-Eigenschaften
Definiert die Form des Randes der oberen linken Ecke
Definiert die Form des Randes der oberen rechten Ecke
Definiert die Form des Randes der unteren rechten Ecke
Definiert die Form des Randes der unteren linken Ecke