Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
border-radius
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die border-radius CSS Eigenschaft rundet die Ecken des äußeren Rahmenrandes eines Elements ab. Sie können einen einzelnen Radius festlegen, um kreisförmige Ecken zu erstellen, oder zwei Radien, um elliptische Ecken zu erzeugen.
Probieren Sie es aus
border-radius: 30px;
border-radius: 25% 10%;
border-radius: 10% 30% 50% 70%;
border-radius: 10% / 50%;
border-radius: 10px 100px / 120px;
border-radius: 50% 20% / 10% 40%;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with rounded corners.
</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #5b6dcd;
color: white;
padding: 10px;
}
Der Radius gilt für den gesamten background, selbst wenn das Element keinen Rahmen hat; die exakte Position des Ausschnitts wird durch die background-clip Eigenschaft definiert.
Die border-radius Eigenschaft gilt nicht für Tabellenelemente, wenn border-collapse auf collapse gesetzt ist.
Hinweis:
Wie bei jeder abgekürzten Eigenschaft können einzelne Untereigenschaften nicht vererbt werden, wie in border-radius:0 0 inherit inherit, was bestehende Definitionen teilweise überschreiben würde. Stattdessen müssen die einzelnen Langformen verwendet werden.
Bestandteil-Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;
/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;
/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;
/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;
/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;
/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;
/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;
Die border-radius Eigenschaft wird spezifiziert als:
- ein, zwei, drei oder vier
<length>oder<percentage>Werte. Dies wird verwendet, um einen einzelnen Radius für die Ecken festzulegen. - optional gefolgt von "/" und einem, zwei, drei oder vier
<length>oder<percentage>Werten. Dies wird verwendet, um einen zusätzlichen Radius festzulegen, sodass Sie elliptische Ecken haben können.
Werte
<length> oder ein
<percentage>, das einen Radius angibt,
der für den Rahmen in jeder Ecke des Rahmens verwendet werden soll. Es wird nur in der
Ein-Wert-Syntax verwendet.
<length> oder ein
<percentage>, das einen Radius angibt,
der für den Rahmen in den Ecken oben links und unten rechts des Elementrahmens
verwendet werden soll. Es wird nur in der Zwei-Wert-Syntax verwendet.
<length> oder ein
<percentage>, das einen Radius angibt,
der für den Rahmen in den Ecken oben rechts und unten links des Elementrahmens
verwendet werden soll. Es wird nur in der Zwei- und Drei-Wert-Syntax verwendet.
<length> oder ein
<percentage>, das einen Radius angibt,
der für den Rahmen in der oberen linken Ecke des Elementrahmens verwendet werden soll. Es wird
nur in der Drei- und Vier-Wert-Syntax verwendet.
<length> oder ein
<percentage>, das einen Radius angibt,
der für den Rahmen in der oberen rechten Ecke des Elementrahmens verwendet werden soll. Es wird
nur in der Vier-Wert-Syntax verwendet.
<length> oder ein
<percentage>, das einen Radius angibt,
der für den Rahmen in der unteren rechten Ecke des Elementrahmens verwendet werden soll. Es wird
nur in der Drei- und Vier-Wert-Syntax verwendet.
<length> oder ein
<percentage>, das einen Radius angibt,
der für den Rahmen in der unteren linken Ecke des Elementrahmens verwendet werden soll. Es wird
nur in der Vier-Wert-Syntax verwendet.
<length>-
Gibt die Größe des Kreisradius oder die Halbachsen der Ellipse mit Längenwerten an. Negative Werte sind ungültig.
<percentage>-
Gibt die Größe des Kreisradius oder die Halbachsen der Ellipse mit Prozentwerten an. Prozentsätze für die horizontale Achse beziehen sich auf die Breite des Kastens; Prozentsätze für die vertikale Achse beziehen sich auf die Höhe des Kastens. Negative Werte sind ungültig.
Beispiel:
border-radius: 1em / 5em;
/* It is equivalent to: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
border-radius: 4px 3px 6px / 2px 4px;
/* It is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen: |
|---|---|
| Anwendbar auf | alle Elemente; aber User Agents sind nicht gezwungen dies auf table und inline-table Elemente anzuwenden, falls border-collapse collapse ist. Das Verhalten bei internen Tabellenelementen ist momentan undefiniert.. Auch anwendbar auf ::first-letter. |
| Vererbt | Nein |
| Prozentwerte | bezieht sich auf die Größe der Border-Box |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
border-radius =
<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ] ?
<length-percentage> =
<length> |
<percentage>
Beispiele
Vergleich von Rahmenstilen
Das folgende Beispiel enthält sieben <pre> Elemente, von denen jedes Kombinationen von border und border-radius Stilen demonstriert.
Die auf jedes <pre> Element angewendeten Stile sind als Inhalt des Elements enthalten, sodass Sie die CSS-Deklarationen sehen können, die erforderlich sind, um den zugehörigen Rahmenstil zu erstellen:
<pre id="example-1">
border: solid 10px;
border-radius: 10px 40px 40px 10px;
</pre>
<pre id="example-2">
border: groove 1em red;
border-radius: 2em;
</pre>
<pre id="example-3">
background: gold;
border: ridge gold;
border-radius: 13em / 3em;
</pre>
<pre id="example-4">
border: none;
border-radius: 40px 10px;
background: gold;
</pre>
<pre id="example-5">
border: none;
border-radius: 50%;
background: burlywood;
</pre>
<pre id="example-6">
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
</pre>
<pre id="example-7">
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
</pre>
pre {
margin: 20px;
padding: 20px;
width: 80%;
height: 50px;
}
pre#example-1 {
border: solid 10px;
border-radius: 10px 40px 40px 10px;
}
pre#example-2 {
border: groove 1em red;
border-radius: 2em;
}
pre#example-3 {
background: gold;
border: ridge gold;
border-radius: 13em / 3em;
}
pre#example-4 {
border: none;
border-radius: 40px 10px;
background: gold;
}
pre#example-5 {
border: none;
border-radius: 50%;
background: burlywood;
}
pre#example-6 {
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
}
pre#example-7 {
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
}
Verwendung von corner-shape mit border-radius
Wenn ein nicht-0 border-radius Wert auf eine Kastenecke angewendet wird, können Sie die corner-shape Eigenschaft (oder eine ihrer Lang- und Kurzformen) verwenden, um benutzerdefinierte Formen auf diese Ecke anzuwenden, wie z. B. eine Fase, eine Kerbe oder ein abgerundetes Rechteck. Dieses Beispiel zeigt die Verwendung von corner-shape.
HTML
Das Markup für dieses Beispiel enthält ein einzelnes <div> Element.
<div></div>
CSS
Wir geben dem Kasten einige grundlegende Stile, die wir aus Platzgründen weggelassen haben. Wir wenden auch einen box-shadow, einen border-radius von 0 20% 50px 30% und eine corner-shape von superellipse(0.5) bevel notch squircle an.
body {
font-family: "Helvetica", "Arial", sans-serif;
width: 240px;
margin: 20px auto;
}
div {
width: 100%;
height: 180px;
display: flex;
justify-content: center;
align-items: center;
background-color: green;
background-image: linear-gradient(
to bottom,
rgb(255 255 255 / 0),
rgb(255 255 255 / 0.5)
);
}
div {
box-shadow: 1px 1px 3px gray;
border-radius: 0 20% 50px 30%;
corner-shape: superellipse(0.5) bevel notch squircle;
}
Ergebnis
Das gerenderte Ergebnis sieht folgendermaßen aus:
Beachten Sie, dass in der oberen linken Ecke keine Eckform angewendet wird, da dort ein border-radius von 0 festgelegt ist.
Spezifikationen
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-radius |
Browser-Kompatibilität
Loading...
Siehe auch
- Border-Radius-verwandte CSS-Eigenschaften:
border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius,border-start-start-radius,border-start-end-radius,border-end-start-radius,border-end-end-radius