Abgerundete Ecken in allen Browsern

Seit CSS3 gibt es das Attribut border-radius, mit dem sich abgerundete Ecken erstellen lassen. Auch moderne Browser (aktuelle Versionen) kommen damit klar. Diese runden Ecken sind aber nichts Neues. Mit browserspezifischen Codes bieten einige Browser schon seit Jahren diese Funktion an. Folgender Code zeigt die Anwendung:

 

Anwendungscode

 

.abgerundet {
  border-radius:10px; /* CSS3 */
  -moz-border-radius:10px; /* Firefox */
  -webkit-border-radius:10px; /* Safari, Chrome */
  -khtml-border-radius:10px; /* Konqueror */
}

Obiger Code stellt die Runden Ecken schon in vielen Browsern korrekt dar. Nur der IE bis Version 9 macht hier noch Probleme. Wenn wir einen speziellen META-Tag einbauen, werden die runden Ecken auch beim Internet Explorer richtig dargestellt. Dieser META-Tag Lautet:

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

 

kompletter Beispiel-Code

Eine kompletter Code für eine Box mit abgerundeten Ecken könnte etwa so aussehen:

<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <style type="text/css">
  <!--
    body {
      background-color: #FFF;
    }
    .box {
      border: 5px solid #CCC;
      background-color: #EEE;
      width: 500px;
      padding: 10px;
      margin: 10px;
    }
    .abgerundet {
      border-radius:10px; /* CSS3 */
      -moz-border-radius:10px; /* Firefox */
      -webkit-border-radius:10px; /* Safari, Chrome */
      -khtml-border-radius:10px; /* Konqueror */
    }
  -->
  </style>
</head>
<body>
  <div class="abgerundet box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis auctor fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  </div>
</body>
</html>

Resultat dieses Codes anzeigen.

 

individuelle Rundungen

alle 4 Ecken können auch separat angesprochen werden. Folgender Code zeigt diese Möglichkeit:

.abgerundet {
  border-top-right-radius: 8px; // oben rechts
  border-top-left-radius: 8px; // oben links
  border-bottom-right-radius: 2px; // unten rechts
  border-bottom-left-radius: 2px;  // unten links
}
  • Donnerstag, 23 Juni 2011

Kommentare (0)

Bitte Kommentar schreiben

Bitte einloggen, um einen Kommentar zu schreiben.