… 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:
Internet Explorer 9:
Bis hierhin kein Problem, IE9 und Firefox machen alles “richtig”, aber nun:
Chrome 10:
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):
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):
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?
2 Kommentare:
Hi,
konnte deine Problematik nachvollziehen, sah bei mir auch so aus.
Alternativ kannst du auch zwei divs benutzen. Das eine div nutzt du als deinen "Rand" mit den vier runden Ecken und das zweite als dein Content-div. Bei dem Content-div setzt du nur rechts oben/unten den Radius und fertig. Hat bei mir in allen aktuellen Browsern funktioniert (auch Opera ;-) ).
Oh ja, so ein ähnliches Problem hatte ich auch. Lange gegooglet und herausgefunden, dass die Webkit-Browser eine etwas andere Ausgabe benötigen. Nämlich für jede Ecke anders.
Spiel mal hiermit rum - vielleicht kommst Du so auch bei Deinem Problem weiter. Frag mich grad nicht, warum ich das für die anderen Browser als Webkit auch aufgeteilt hatte...
-webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px;
-o-border-radius-topleft: 8px; -o-border-radius-topright: 8px;
border-radius-topleft: 8px; border-radius-topright: 8px;
Kommentar veröffentlichen