Border-Radius

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 40 von 76.

In CSS wird die Eigenschaft border-radius verwendet, um abgerundete Ecken für ein Element zu erstellen. Diese Eigenschaft ermöglicht es Ihnen, den Radius der Krümmung für jede Ecke anzugeben, was Ihnen die Kontrolle über die Form des Elementrahmens gibt. Hier ist die grundlegende Syntax für die Verwendung der Eigenschaft border-radius:

selector {
    border-radius: value;
}

value: Der gewünschte Radius für die abgerundeten Ecken, der in Pixeln (px), Ems (em), Prozentsätzen (%) oder anderen gültigen CSS-Einheiten angegeben werden kann.

Sie können einen einzelnen Wert angeben, um denselben Radius auf alle vier Ecken anzuwenden. Im folgenden Beispiel werden alle <div>-Elemente abgerundete Ecken mit einem Radius von 10px haben.

div {
    border-radius: 10px;
}

Sie können die verschiedenen Werte für jede Ecke einzeln festlegen, wobei die folgende Reihenfolge verwendet wird: oben-links, oben-rechts, unten-rechts, unten-links.

.button {
    border-radius: 10px 20px 30px 40px;
}

Sie können auch nur zwei Werte angeben; der erste Wert gilt für die Ecken oben links und unten rechts, und der zweite Wert gilt für die Ecken oben rechts und unten links.

img {
    border-radius: 20px 50px;
}

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit zwei <div>-Elementen, die jeweils die Klassen "one" und "two" haben. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel unter Verwendung eines Klassenselektors, um alle Elemente mit der Klasse "one" anzusprechen. Setzen Sie den border auf 3px solid #4287f5 und den border-radius auf 15px, um allen Ecken die gleiche abgerundete Form zu geben.
Schreiben Sie eine CSS-Regel unter Verwendung eines Klassenselektors, um alle Elemente mit der Klasse "two" anzusprechen. Setzen Sie den border auf einen beliebigen Wert und den border-radius auf einen beliebigen Wert Ihrer Wahl.

Spickzettel

Die Eigenschaft border-radius erzeugt abgerundete Ecken für Elemente:

selector {
    border-radius: value;
}

Werte können in Pixeln (px), Ems (em), Prozent (%) oder anderen gültigen CSS-Einheiten angegeben werden.

Einzelner Wert - wendet denselben Radius auf alle Ecken an:

div {
    border-radius: 10px;
}

Vier Werte - einzelne Ecken (oben-links, oben-rechts, unten-rechts, unten-links):

.button {
    border-radius: 10px 20px 30px 40px;
}

Zwei Werte - der erste gilt für oben-links und unten-rechts, der zweite für oben-rechts und unten-links:

img {
    border-radius: 20px 50px;
}

Probier es selbst

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>