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

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:

A
B
C
D
E
F
G
H

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

  • chrome iconChrome4*
  • opera iconOpera10.5
  • firefox iconFirefox3*
  • safari iconSafari3.1*
  • internet_explorer iconInternet Explorer9
  • edge iconEdge12

Mobile / Tablet

  • ios_safari iconIos Safari3.2*
  • opera_mobile iconOpera Mobile11
  • opera_mini iconOpera Mini-
  • android iconAndroid2.1*
  • android_chrome iconAndroid Chrome71
  • android_firefox iconAndroid Firefox64

oliver

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.

Hinterlasse ein Kommentar zum Beitrag "Border-Radius Generator"

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

Follow Me

doch mal auf Instagram