In diesem Artikel werde ich beschreiben, wie man mit der Hilfe von dem border-radius Attribut verschiedenen Html-Elementen einen runden Randzuordnen kann. Zuerst einmal muss ich sagen, dass die folgende Methode nicht für den Internet Explorer funktionert. In diesem sind runde Border nur mit dem Einsatz von Bildern möglich.
Erst sollte man einen Kontainer in Html erstellen, welchem man dann ( beispielsweise ) die Klasse “runder-rand” gibt. In der CSS Datei gibt man der Klasse “runder-rand” dann folgende Eigenschaften:
.runder-rand { border-radius:10px; -moz-border-radius:10px; }
Natürlich benötigt man auch noch Höhen- und Breitenangaben, da ich das aber für selbstverständlich halte, habe ich diese weggelassen.
Wie ihr sehen könnt, benötigt man 2 CSS Attribute, um einem Kontainer einen runden Rand zu verpassen. “border-radius:10px” richtet sich an alle Browser außer Firefox und IE, deshalb wird noch “-moz-border-radius:10px” hinzugefügt, was speziell für Firefox ist.
Somit sollte ein Kontainer, der die Klasse “runder-rand” besitzt, nun auch einen runden Border haben, so wie hier:
Bei dem zweiten Beispiel habe ich den Code verändert und zwar so:
border-radius:10px 25px; -moz-border-radius:10px 25px;
Der erste Wert ( 10px ) beschreibt den Radius oben links und unten rechts, der zweite hingegen oben rechts und unten links. Bei anderen Attributen wie zum Beispiel “margin”, wäre der erste Wert für oben und unten, der zweite Wert für links und rechts zuständig. Man könnte auch 4 Angaben machen, dann würde der erste Wert für den border-radius oben links zuständig sein und die folgenden würden wie im Uhrzeigersinn die nächsten Ecken verändern.
Dieser Artikel wurde von Seo Design verfasst.
