Wie definiere ich ein Rechteck mit abgerundeten Ecken in CSS?
Um ein Rechteck mit abgerundeten Ecken in CSS zu erstellen, verwendet man die Eigenschaft border-radius. Diese Eigenschaft sorgt dafür, dass die Ecken eines Elements nicht scharf sind, sondern rundlich erscheinen.
Erklärung der wichtigsten CSS-Eigenschaften
width und height legen die Größe des Rechtecks fest. In diesem Beispiel ist es 300 Pixel breit und 150 Pixel hoch.
background-color definiert die Hintergrundfarbe des Rechtecks. Hier wurde ein grüner Farbton gewählt.
Die Eigenschaft border-radius ist entscheidend für die Abrundung der Ecken. Der Wert 20px bedeutet, dass die Ecken mit einem Radius von 20 Pixeln abgerundet werden. Je größer der Wert, desto runder erscheinen die Ecken.
Zusätzlich wurde ein box-shadow hinzugefügt, um dem Element einen leichten Schatten zu geben, was das Rechteck plastischer wirken lässt. Dies ist optional.
Mit margin wird das Element vom Rand des Containers weggeschoben und zentriert, display: flex und die zugehörigen Eigenschaften dienen dazu, den Text innerhalb des Rechtecks sowohl horizontal als auch vertikal zu zentrieren.