CSS: Ausgefallene Formen mit Border-Radius

Ausgefallene Formen mit border-radius

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.

Diesen Beitrag teilen:

Verwandte BeitrÀge:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.