Archiv der Kategorie: Opera

Runde Ecken mit CSS…

… sind ja heute kein Problem mehr.

Einfach ein

border-radius: 6px;

in das Stylesheet des Div’s und man hat rundherum runde Ecken.

Allerdings sollte man aufpassen, wie dick die Ecken sind.

Bei sowas hier geht es schief:

border: 2px solid #E0E8F4;
border-left-width: 51px;
border-radius: 6px;

Kurz erklärt: 2 Pixel Rand rundherum, nur links 51 Pixel, dann die Ecken 6 Pixel abrunden, fertig.
An und für sich eine einfache Sache, denkt man.

Hier mal Bilder der Browser:

Firefox 4:

firefox

Internet Explorer 9:

ie

Bis hierhin kein Problem, IE9 und Firefox machen alles “richtig”, aber nun:

Chrome 10:

chrome

Man erkennt, dass oben und unten jeweils ein kleiner Teil fehlt.
Der Knaller ist aber Opera 11 (verlinkt auf größeres Bild, da kann man es besser sehen):

opera

Man kann erkennen, dass Opera da irgendeinen “Bogen” nach unten rendert.

Ursache ist wohl die unterschiedliche Dicke der Rahmen und dazu noch die border-radius Eigenschaft, die da wohl Probleme machen.

Vergrößert man den radius-Wert, kann man das ganze auch besser erkennen (hier 18px):

opera2

Die beiden Ecken auf der rechten Seite sind immer in Ordnung, einzig die webkit-Browser und Opera machen ein “Problem”.

Meine Frage nun an euch: Wie behebe ich das? Hat dazu jemand einen Vorschlag?