Border-Radius Generator

Dank Border Radius kann man jedem Element auf der Webseite „runde Ecken“ geben. So lassen sich sehr viele Elemente via css gestalten ohne auf Ladeunfreundliche Grafiken zurückzugreifen. Wer es sich einfach machen möchte, der kann den kostenlosen CSS Border Radius Generator auf dieser Seite nutzen.

Kostenloser CSS Border Radius Generator

border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;

copy to clipboard

Wie funktioniert der Border Radius Generator

Die Werte werden stets im Uhrzeigersinn angegeben – Angefangen oben links. So ist auch der Border Radius Generator aufgebaut. Zudem kann man zwischen Pixel, Em oder Prozent wechseln, je nachdem welche Einheit man benötigt oder möchte.

Durch den Klick auf den Button „copy to clipboard“ werden die Styles zudem direkt in die Zwischenablage kopiert.

Border Radius Beispiele:

Hier noch einige grundlegende Beispiele, die in den aktuellen Versionen von Firefox, Safari / Chrome, Opera und sogar IE9 funktionieren sollten:

Die Styles der Beispiele:

Die Styles der oben abgebildeten Boxen findet ihr hier.

#border-radius-a {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#border-radius-b {
	border-radius: 10px 0 20px 0;
	-moz-border-radius: 10px 0 20px 0;
	-webkit-border-radius: 10px 0 20px 0;
}
#border-radius-c {
	border-radius: 10px 30px 50px 70px;
	-moz-border-radius: 10px 30px 50px 70px;
	-webkit-border-radius: 10px 30px 50px 70px;
}
#border-radius-d {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
#border-radius-e {
	border-bottom-right-radius: 50px;
	-moz-border-radius-bottomright: 50px;
	-webkit-border-bottom-right-radius: 50px;
}
#border-radius-f {
	border-top-right-radius: 20px 60px;
	-moz-border-radius-topright: 20px 60px;
	-webkit-border-top-right-radius: 20px 60px;
}
#border-radius-g {
	border-radius: 1em 4em 1em 4em;
	-moz-border-radius: 1em 4em 1em 4em;
	-webkit-border-radius: 1em 4em 1em 4em;
}
#border-radius-h {
	border-radius: 40px 10px / 10px 40px;
	-moz-border-radius: 40px 10px / 10px 40px;
	-webkit-border-radius: 40px 10px / 10px 40px;
}

Browser Support

Desktop

Chrome4*
Opera10.5
Firefox3*
Safari3.1*
Internet Explorer9
Edge12

Mobile / Tablet

Ios Safari3.2*
Opera Mobile11
Opera Mini-
Android2.1*
Android Chrome71
Android Firefox64

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu Border-Radius Generator

Wenn dir der Beitrag Border-Radius Generator gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.