CSS border-radius-Eigenschaft
Die border-radius-Eigenschaft wird verwendet, um abgerundete Ecken für den äußeren Rand eines Elements zu erstellen.
Die border-radius-Eigenschaft ist eine der CSS3-Eigenschaften.
Diese Eigenschaft ist eine Kurzschreibweise 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 separat festzulegen. Die border-radius-Eigenschaft kann jedoch verwendet werden, um alle vier Ecken gleichzeitig zu definieren. Sie kann einen bis vier Werte annehmen.
Wenn vier Werte angegeben werden, gelten sie jeweils für die Ecken oben-links, oben-rechts, unten-rechts und unten-links. Wenn der Wert für unten-links weggelassen wird, wird standardmäßig der Wert für oben-rechts verwendet. Wenn der Wert für unten-rechts weggelassen wird, wird standardmäßig der Wert für oben-links verwendet. Wenn nur zwei Werte angegeben werden, gilt der erste für die Ecken oben-links und unten-rechts, und der zweite gilt für die Ecken oben-rechts und unten-links. Wenn nur ein Wert angegeben wird, gilt er für alle vier Ecken.
Die border-radius-Eigenschaft wird wie folgt angegeben:
- ein, zwei, drei oder vier Längen- oder Prozentwerte, die verwendet werden, um einen einzelnen Radius für die Ecken festzulegen.
- optional gefolgt von einem Schrägstrich ( / ) und ein, zwei, drei oder vier Längen- oder Prozentwerte. Dies wird verwendet, um einen zusätzlichen Radius festzulegen, sodass Sie elliptische Ecken erhalten können.
Der erste Satz von (1-4) Werten definiert den horizontalen Radius für alle vier Ecken. Ein optionaler zweiter Wertesatz, dem ein Schrägstrich vorangestellt ist, definiert die vertikalen Radien für alle vier Ecken. Wenn nur ein Wertesatz angegeben wird, dienen diese Werte zur gleichmäßigen Bestimmung sowohl des vertikalen als auch des horizontalen Radius.
| Anfangswert | 0 |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein |
| Animierbar | Ja. Jede der Eigenschaften der Kurzschreibweise ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.borderRadius = "20px"; (Hinweis: JavaScript verwendet camelCase borderRadius, im Gegensatz zum CSS-Eigenschaftsnamen mit Bindestrichen.) |
Syntax
Syntax der CSS border-radius-Eigenschaft
border-radius: <length> | <percentage> [ / <length> | <percentage> ]? | initial | inherit;Beispiel für die border-radius-Eigenschaft:
Beispiel für die CSS border-radius-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
width: 50%;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>Border-radius example</h2>
<div></div>
</body>
</html>Ergebnis
Sehen Sie sich ein Beispiel mit Prozent- und Pixelwerten an:
Beispiel für die border-radius-Eigenschaft mit Prozent- und Pixelwerten:
Beispiel für die CSS border-radius-Eigenschaft mit Prozent- und Pixelwerten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.radius-pixel {
height: 40px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
}
.radius-percent {
width: 120px;
height: 120px;
margin-top: 20px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Border-radius example with percent and pixel values</h2>
<div class="radius-pixel"></div>
<div class="radius-percent"></div>
</body>
</html>Sie können den border-radius für ein Element auch mit Hintergrundfarbe oder Hintergrundbild festlegen.
Beispiel für die border-radius-Eigenschaft mit den Eigenschaften background-color und background-image:
Beispiel für die CSS border-radius-Eigenschaft mit den Eigenschaften Hintergrundfarbe und Hintergrundbild
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.radius-bg {
width: 250px;
height: 200px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
}
.radius-img {
width: 250px;
height: 200px;
margin-top: 20px;
background-color: lightgray;
background: url('https://www.w3docs.com/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
background-position: left top;
background-repeat: repeat;
border: 2px solid #1c87c9;
border-radius: 25px;
}
</style>
</head>
<body>
<h1> Border-radius example with background color</h1>
<div class="radius-bg"></div>
<h2> Border-radius example with background image</h2>
<div class="radius-img"></div>
</body>
</html>Hinweis: In älteren Browsern werden Hintergrundbilder möglicherweise nicht an den abgerundeten Ecken beschnitten. Verwenden Sie background-clip: border-box;, um ein konsistentes Verhalten sicherzustellen.
Sehen wir uns nun ein Beispiel voller verschiedener Boxen mit unterschiedlichen border-radius-Werten an, die die Form der Boxen bestimmen.
Beispiel für die border-radius-Eigenschaft mit mehreren Werten:
Beispiel für die CSS border-radius-Eigenschaft mit verschiedenen Werten (%, px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 250px;
height: 150px;
border: solid 3px #1c87c9;
background: #1c87c9;
}
.radius_1 {
border-radius: 25px;
}
.radius_2 {
border-radius: 25% 10%;
}
.radius_3 {
border-radius: 10% 30% 50% 70%;
}
.radius_4 {
border-radius: 10% / 50%;
}
.radius_5 {
border-radius: 10px 100px / 120px;
}
.radius_6 {
border-radius: 25% 10%;
}
.radius_7 {
border-radius: 50% 20% / 10% 40%;
}
.radius_8 {
border-radius: 50%;
}
</style>
</head>
<body>
<h1> Border-radius examples</h1>
<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 | Ausführen |
|---|---|---|
| length | Legt die Abrundungsgröße der Ecken fest. | Ausführen » |
| % | Legt die Abrundungsgröße der Ecken in Prozent fest. | Ausführen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Was macht die CSS-Eigenschaft 'border-radius'?