Wenn es darum geht, das Aussehen einer Website aufzupeppen, dann gehört die Eigenschaft border-radius zu den alten Bekannten. Als sich diese CSS-Eigenschaft damals gegen 2008 etabliert hat, haben viele aus der Webdesign-Branche aufgeatmet, da bis dahin abgerundete Ecken nur durch Zuhilfenahme von Grafikprogrammen wie Photoshop oder Gimp möglich waren.
Nun konnte man damals mit einer einfachen Anweisung die Ecken einer Box oder eines Bildes abrunden. Der Einzeiler border-radius: 9px; machte aus einer eckigen Box, eine mit abgerundeten Ecken.
Selbstverständlich wissen auch viele, dass man jede Ecke einzeln mit Werten ansprechen kann. Zum Beispiel mit folgenden Werten: border-radius: 12px 36px 6px 48px;. Dann schaut das Ergebnis folgendermaßen aus:
Auch hier gilt die Regel, dass der erste Wert aus der Viererkette die Ecke links oben, dann rechts oben, dann rechts unten und zu Schluss die linke untere Ecke anspricht. Aber das ist noch nicht alles, die Eigenschaft border-radius verträgt auch acht Werte. Die Form aus dem Vorschaubild ist durch die folgende Deklaration entstanden: border-radius: 80% 10% 50% 40% / 30% 10% 40% 10%;. Wenn du diese Werte eingibst, dann bekommst du die Form zu sehen, wie sie im folgenden Beispiel auf CodePenn abgebildet ist:
See the Pen Ausgefallene Formen mit Border-Radius by Vlad (@vladimir-simovic) on CodePen.
Die vier Werte für border-radius vor dem Schrägstrich sind für die horizontalen Angaben und die Werte nach dem Schrägstrich sind für die vertikalen Angaben zuständig. Wenn du mehr über dieses Thema erfahren möchtest, dann empfehle ich dir den englischsprachigen Artikel CSS: Border-Radius Can Do That? Aus dem Artikel ist auch ein Generator entstanden, der die helfen kann außergewöhnliche Formen mit border-radius zu gestalten. Viel Spaß beim ausprobieren.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
