Kemmerzell.org


CSS: Abgerundete Ecken

Von Maximilian · 02.06.2014 · Kategorie: CSS

Bei der Erstellung einer neuen und modernen Internetseite setzt man meist auf klare Strukturen. Dennoch sieht es nicht sonderlich gut aus, wenn alle Elemente komplett kantig sind. Daher möchte man unter Umständen die Ecken bestimmter Elemente abrunden, damit diese schöner und eleganter wirken. Mit einfachem CSS ist das auch ganz schnell möglich. Doch wie geht das? Um die Ecken von bestimmten Elementen abzurunden, braucht man nur wenige Zeilen CSS-Code. In diesen muss lediglich der Radius der Abrundung für die vier Ecken des entsprechenden Elementes festgelegt werden. Dies könnte dann folgendermaßen aussehen, wenn man alle vier Ecken mit einem Radius von 2 Pixel abrunden möchte:

Die Werte kann man natürlich selbst individuell festlegen. Das kommt immer ganz auf den Einsatzzweck an. Die Eigenschaft wird allerdings nicht vererbt. Elemente, die sich in einem Container mit abgerundeten Ecken befinden, haben also nicht automatisch auch abgerundete Ecken. Dies müsste man separat festlegen. Doch natürlich muss man nicht gleich alle vier Ecken eines Elementes abrunden. Dies geht auch nur mit bestimmten Elementen. Das könnte dann so aussehen, wenn man nur die beiden oberen Ecken abrunden möchte:

So spart man sich Hinterundbilder bei Elementen, die abgerundete Ecken haben. Dadurch wird die entsprechende Website sauberer und auch auf die Ladezeiten kann sich dies positiv auswirken. Daher empfiehlt sich der Einsatz dieses Codes durchaus, wenn man die Ecken bestimmter Elemente abrunden möchte. Zudem sieht dies oftmals deutlich besser aus als Elemente, die einfach kantig aufhören.

Kommentieren Teilen +1 Twittern
Dieser Artikel wurde von +Maximilian verfasst.
Kommentare
Einen eigenen Kommentar hinterlassen




Newsletter

Um unseren Newsletter zu abonnieren, tragen Sie bitte einfach Ihre Email-Adresse unten ein. Sie werden daraufhin eine Bestätigungsmail erhalten!

Jetzt den RSS-Feed abonnieren!

Klicke hier und abonniere den RSS-Feed, um immer auf dem neusten Stand zu bleiben.

Tipp senden

Du hast etwas entdeckt, über das wir noch nicht berichtet haben? Dann schicke uns doch einen Hinweis zu!

Klicke einfach auf den unteren Button, fülle das Formular aus und wenn das Thema passt, erscheint bei uns schon bald ein Artikel zu deiner Entdeckung.

Jetzt Tipp senden!