Manchmal sind es die kleinen Dinge, die das Herz eines Webdesigners höher schlagen lassen. So ist mit dem neuen Standard CSS3 eine Funktion hinzugefügt worden, die es erlaubt, direkt mit CSS runde Ecken in das Layout einer Webseite einzufügen.
CSS3-Funktion “border-radius”
Der neue Befehl für das CSS-Stylesheet lautet border-radius. Mit ihm ist es möglich, bestimmte Elemente mit runden Ecken auszuzeichnen. Ein Anwendungsfall hierfür sind beispielsweise Info-Boxen, die Navigationsleiste oder einfach der Haupttext. Die Angabe des border:radius kann in Pixel oder relativ mit “em” oder einer Prozentangabe im CSS-Quellcode erfolgen. Mit ein wenig Experimentierfreude werden Sie sicher schnell ein Händchen für den bei Ihnen passenden Wert finden.
Welche Browser unterstützen border:radius?
Alle aktuellen Browser sollten mit der Angabe border:radius etwas anfangen können. Wenn Sie auf Nummer sicher gehen wollen, dann können Sie in Ihrer CSS-Datei diesen Befehl noch mit den entsprechenden Hersteller-Präfixen wie -webkit-border-radius oder -moz-border-radius wiederholen.
Die border:radius-Angabe präzisieren
CSS3 bietet hier aber noch weitere Einstellmöglichkeiten an. So lassen sich mittels “border-top-left-radius”, “border-top-right-radius” “border-bottom-right-radius” und “border-bottom-left-radius” sogar die einzelnen Ecken individuell einstellen. Auch eine Kurzschreibweise mit dem direkten Befehl border:radius bietet CSS3 wie üblich an. Für Webdesigner stellt sich also nicht mehr die Frage, wie mit CSS runde Ecken programmiert werden können, sondern nur noch, ob diese sich nahtlos in das Design der Webseite einfügen.
Weiterführendes zur Webseitenerstellung:
- Wer seine Website nicht selbst programmieren kann oder möchte, bekommt bei www.helis-webdesign.de professionelle Unterstützung.
- Bei www.homepagehelfer.org finden Homepage-Ersteller nicht nur Unterstützung im Forum, sondern auch Grafik- und Designvorlagen, ein Hilfe-Lexikon und zahlreiche weitere Hilfestellungen.
- DTP Atelier bietet Print- und Webdesign in der Schweiz.
Bild: bigstockphoto.com / Rawpixel.com
