Die Eigenschaft border-radius wird verwendet, um abgerundete Ecken für die äußere Randkante eines Elements herzustellen.
Diese Eigenschaft ist eine Abkürzung für die Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius, die verwendet werden, um die vier Ecken eines Elements getrennt einzustellen. Mit der Eigenschaft border-radius können jedoch alle vier Ecken gleichzeitig definiert werden. Es kann von einem bis zu vier Werten haben.
Wenn alle vier Werte eingestellt sind, stellen sie die Grenzen oben links, oben rechts, unten rechts und unten links dar. Wenn unten links übersehen wird, ist es dasselbe wie oben rechts, wenn unten rechts weggelassen wird, ist es dasselbe wie oben links, und wenn nur ein Wert definiert ist, wird es für alle vier Ecken gleichermaßen verwendet.
Die Eigenschaft border-radius wird angegeben als::
- ein, zwei, drei oder vier Längen- oder Prozentwerte. Hiermit wird ein einzelner Radius für die Ecken eingestellt.
- gefolgt von einem Schrägstrich ( / ) und einem, zwei, drei oder vier Längen- oder Prozentwerten. Hiermit wird ein zusätzlicher Radius eingestellt, so dass Sie elliptische Ecken haben können.
Der erste Satz von (1-4) Werten definiert den horizontalen Radius für alle vier Ecken. Ein optionaler zweiter Satz von Werten, dem ein Schrägstrich vorangestellt ist, definiert die vertikalen Radien für alle vier Ecken. Wenn nur ein Satz von Werten geliefert wird, werden diese verwendet, um sowohl die vertikale als auch die horizontale Ebene gleichermaßen zu bestimmen.
| Anfangswert | 0 |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter. |
| Geerbt | Nein |
| Animierbar | Ja. Jede der Eigenschaften der Kurzform ist animierbar. |
| Version | CSS3 |
| DOM Syntax | object.style.borderRadius = "20px"; |
Syntax
border-radius: 1-4 length | 1-4 length (%) | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
height: 40px;
width: 50%;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-radius</h2>
<div></div>
</body>
</html>Für die bestmögliche Browserunterstützung sollen Sie -moz- für Firefox und -webkit- für Safari, Chrome und andere Browser voranstellen.
Ein Beispiel mit den Präfixen -moz- und -webkit-, wo zwei Eigenschaften von border-radius: mit percent und pixel verwendet wird.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.radius-pixel {
height: 40px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}
.radius-percent {
width: 120px;
height: 120px;
margin-top: 20px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-radiusmit -moz- und -webkit-</h2>
<div class="radius-pixel"></div>
<div class="radius-percent"></div>
</body>
</html>Sie können auch die die Eigenschaft border-radius für ein Element mit background color oder background image einstellen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.radius-bg {
width: 250px;
height: 200px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}
.radius-img {
width: 250px;
height: 200px;
margin-top: 20px;
background-img: lightgray;
background: url('/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
background-position: left top;
background-repeat: repeat;
border: 2px solid #1c87c9;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-radius mit background color</h2>
<div class="radius-bg"></div>
<h2>Ein Beispiel für border-radius mit background image</h2>
<div class="radius-img"></div>
</body>
</html>Ein Beispiel mit verschiedenen Boxen mit unterschiedlichen Werten für border-radius, die die Form der Boxen bilden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
width: 250px;
height: 150px;
border: solid 3px #1c87c9;
background: #1c87c9;
}
.radius_1 {
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
.radius_2 {
border-radius: 25% 10%;
-moz-border-radius: 25% 10%;
-webkit-border-radius: 25% 10%;
}
.radius_3 {
border-radius: 10% 30% 50% 70%;
-moz-border-radius: 10% 30% 50% 70%;
-webkit-border-radius: 10% 30% 50% 70%;
}
.radius_4 {
border-radius: 10% / 50%;
-moz-border-radius: 10% / 50%;
-webkit-border-radius: 10% / 50%;
}
.radius_5 {
border-radius: 10px 100px / 120px;
-moz-border-radius: 10px 100px / 120px;
-webkit-border-radius: 10px 100px / 120px;
}
.radius_6 {
border-radius: 25% 10%;
-moz-border-radius: 25% 10%;
-webkit-border-radius: 25% 10%;
}
.radius_7 {
border-radius: 50% 20% / 10% 40%;
-moz-border-radius: 50% 20% / 10% 40%;
-webkit-border-radius: 50% 20% / 10% 40%;
}
.radius_8 {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
</style>
</head>
<body>
<h2>Beispiel für border-radius</h2>
<div class="radius_1"></div>
<br />
<div class="radius_2"></div>
<br />
<div class="radius_3"></div>
<br />
<div class="radius_4"></div>
<br />
<div class="radius_5"></div>
<br />
<div class="radius_6"></div>
<br />
<div class="radius_7"></div>
<br />
<div class="radius_8"></div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| length | Es legt die Rundungsgröße der Ecken fest. |
| % | Es setzt die Rundungsgröße der Ecken in Prozent. |
| initial | Es setzt die Eigenschaft auf den Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 4+ | 3+ | 3.1+ | 11.5+ |
Übe dein Wissen
