[Tutorial] Runde Ecken mit CSS mit allen Browsern außer IE

[gamer94]

Mittlerweile verstehen alle aktuellen Browser (Opera 11, Firefox 4, IE 9, Safari 5 und Chrome 10) die CSS3 Version border-radius!

Alter Beitrag:

Runde Ecken sehen gut aus, sind aber momentan nur kompliziert umsetzbar. Mit CSS ist es am einfachsten und elegantesten (meiner Meinung nach) aber weil mal wieder nur ein Browser auf die Zukunft vorbereitet ist (CSS3 mit Opera ) braucht man für alle anderen Browser Spezialeigenschaften, die bis auf den Namen komplett gleich zu benutzen sind (Sinnvoll!).
Der IE hat mal wieder nichts drauf und unterstützt keine der Eigenschaften, war ja irgendwie auch klar.

CSS3 (z.B. Opera):

Code:

border-radius: 20px; /*Alle Ecken*/

/*Einzelne Ecken:*/
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

Mozilla Engine (z.B. Firefox)

Code:

-moz-border-radius: 20px; /*Alle Ecken*/

/*Einzelne Ecken:*/
-moz-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;

Webkit Engine (z.B. Safari)

Code:

-webkit-border-radius: 20px; /*Alle Ecken*/

/*Einzelne Ecken:*/
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;

KDE-Browser (z.B. Konqueror)

Code:

-khtml-border-radius: 20px;  /*Alle Ecken*/

/*Einzelne Ecken:*/
-khtml-border-radius-topright: 20px;
-khtml-border-radius-topleft: 20px;
-khtml-border-radius-bottomright: 20px;
-khtml-border-radius-bottomleft: 20px;

Für die 20px einfach euren gewünschten Radius einsetzen.

Anmerkungen:
Chrome unterstützt übrigens nach meinen Tests übrigens alle Prefixeigenschaften (-moz, -webkit, -khtml).

Ihr könnt ruhig alle Eigenschaften für alle Browser nacheinander auflisten, Browser die eine der Eigenschaften nicht verstehen ignorieren dieses dann einfach.

Möglichkeiten für den IE: Bilder benutzen (find' ich übrigens ne blöde Lösung) oder Javascript. Die sinnvollste Methode: Keine runden Ecken für den IE, so kann man die User dazu drängen auf andere Browser unzusteigen.

Hoffentlich wird CSS3 bald zum Standart erklärt, das würde alles etwas übersichtlicher machen, weil border-radius dann von allen (auch IE) unterstützt wird.

mfg gamer94 [/code]

[Lennart]

Danke dass du deine Erkenntnisse nochmal mit uns allen geteilt hast, diese verschiedenen Regelungen sind wirklich furchtbar.

Ich schau mal, vielleicht setz ich die runden Ecken hier auf Zaiendo auch für die anderen Browser noch um...

Danke!

[xmodder]

also bei Safari seh ich runde Ecken ...

[gamer94]

Jo, Lennart hat, wenn ich das grad auf die schnelle richtig gesehen hab, die Webkit und Mozilla Prefix Eigenschaften hinzugefügt, Webkit ist für Safari.

mfg gamer94

[PROman]

Korrekt, die eigentliche CSS3 Eigenschaft fehlt aber. Konqueror muss man vermutlich nicht unterstützen, der Benutzerkreis dürfte sehr klein sein.

[Lennart]

Ich habe die Konquerror und CSS3-Eigenschaften für Zaiendo hinzugefügt - danke Patrick!

[gamer94]

Hehe, ich habs direkt gemerkt.
Schön, dass ich jetzt auch endlich alles rund sehe, danke dir.

mfg gamer94

[Lennart]

Bitte und danke

[Sascia]

Schönes Tutorial, für die Performance würde ich aber zu Bildern raten. Wieso?
Sie sind kaum größer als diese massigen CSS-Zeilen und sehen garantiert genau so aus wie man sie haben will.

*knuddel*

[gamer94]

Mittlerweile "verstehen" alle Browser (auch IE9) die CSS3 Eigenschaft border-radius! Es ist also nur noch eine Zeile nötig