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?

2 Gedanken zu „Runde Ecken mit CSS…

  1. Stefan

    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 😉 ).

    Antworten
  2. Jan

    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;

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.