HTML: Kanten abrunden in CSS

Um die Kanten abzurunden, gibt es in CSS verschiedene Eigenschaften, die du nutzen kannst. Die wohl bekannteste ist die border-radius Eigenschaft. Mit dieser kannst du den Radius der Ecken eines Elements festlegen. Du musst lediglich den Wert in Pixel oder Prozent angeben, je nachdem, wie stark du die Ecken abrunden möchtest.

HTML: CSS Kanten abrunden

Hier ist ein Beispielcode, um die Kanten eines HTML-Elements abzurunden:

.rounded {
  border-radius: 10px; /* Hier kannst du den Radius anpassen */
}

In diesem Beispiel hat das Element mit der Klasse .rounded eine Abrundung der Kanten mit einem Radius von 10 Pixeln.

Du kannst nicht nur alle vier Ecken gleichzeitig abrunden, sondern auch individuelle Ecken nach Bedarf. Hier ist ein Beispiel, wie du nur die oberen Ecken abrunden kannst:

.rounded {
  border-top-left-radius: 10px; /* Hier kannst du den Radius anpassen */
  border-top-right-radius: 10px; /* Hier kannst du den Radius anpassen */
}

Mit dieser Code-Anpassung werden nur die oberen Ecken des Elements abgerundet, während die unteren Ecken ihre normalen Kanten behalten.

Wenn du nur eine einzelne Ecke abrunden möchtest, kannst du ebenfalls die border-radius Eigenschaft verwenden und die Ecken, die du nicht abrunden möchtest, auf den Wert 0 setzen. Hier ist ein Beispiel:

.rounded {
  border-radius: 0 0 10px 0; /* Hier kannst du den Radius anpassen */
}

In diesem Fall wird nur die untere rechte Ecke des Elements abgerundet, während die anderen Ecken ihre normalen Kanten behalten.

Wie du siehst, ist das Abrunden von Kanten mit CSS ganz einfach. Du musst nur die richtigen Eigenschaften verwenden und den gewünschten Radius festlegen. Probiere es gerne aus und finde heraus, wie du deine Elemente noch ansprechender gestalten kannst!

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite