Rahmenradius

Teil des Abschnitts Styling mit 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. Mit dieser Eigenschaft kannst du den Radius der Krümmung für jede Ecke festlegen und so die Form des Rahmens des Elements steuern. 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), Prozentangaben (%) oder anderen gültigen CSS-Einheiten angegeben werden kann.

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

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

Dir liegt ein HTML-Dokument mit zwei <div>-Elementen vor, die jeweils die Klassen „one“ und „two“ haben. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel mit einem Klassenselektor, um alle Elemente mit der Klasse „one“ auszuwählen. Setze den Rahmen auf 3px solid #4287f5 und den border-radius auf 15px, damit alle Ecken dieselbe abgerundete Form erhalten.
Schreibe eine CSS-Regel mit einem Klassenselektor, um alle Elemente mit der Klasse „two“ auszuwählen. Setze den Rahmen auf einen beliebigen Wert und den border-radius auf einen beliebigen Wert deiner Wahl.

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>