[CSS] Abgerundete Ecken

Drucken
( 1 Vote )
Hauptkategorie: Programmieren Kategorie: CSS
Erstellt am 09.01.2013 Zuletzt aktualisiert am 03.05.2013 Geschrieben von Jonny132
Musste man früher noch Bilder verwenden um um Ecken wie abgerundet darzustellen, ist es Heute dank CSS3 nicht mehr schwer.

Mittlerweile haben alle gängigen und aktuelle Browser diese neue Funktionalität von CSS3 implementiert und somit auch das Abrunden von Ecken. Eine Ausnahme ist hier (noch) Firefox. Doch das ist kein Problem, denn dieser kann, dank eigener Implementierung, auch Ecken abgerundet Darstellen lassen.

Verwendbare CSS-Eigenschaften:
CSS3 - Definition FireFox (Mozilla) - Definition Erklärung
border-radius -moz-border-radius Rundet alle Ecken gleichermaßen ab
border-top-left-radius -moz-border-radius-topleft Rundet die linke obere Ecke ab
border-top-right-radius -moz-border-radius-topright Rundet die rechte obere Ecke ab
border-bottom-right-radius -moz-border-radius-bottomright Rundet die rechte untere Ecke ab
border-bottom-left-radius -moz-border-radius-bottomleft Rundet die linke untere Ecke ab


1. Beispiel:
      #Beispiel1
      {
        border-radius: 20px;
        -moz-border-radius: 20px;
        border: 1px solid;
	background-color:green;
	padding: 5px;
      }
<div id="Beispiel1">
  Hier kommt der Inhalt, < br/>
  dem Sie in der Abgerundeten Box < br/>
  darstellen wollen.     
</div>
Border-Radius Beispiel

In diesem Beispiel wird einfach ein Div-Element mit einem border-radius von 20 Pixel versehen.

2. Beispiel:
      #Beispiel2
      {
        border-top-left-radius: 150px 50px;
        -moz-border-radius-topleft: 50px 15px;
        border: 1px solid;
	background-color:orange;
	padding: 5px;
      }
<div id="Beispiel2">
  Hier kommt der Inhalt, < br/>
  dem Sie in der Abgerundeten Box < br/>
  darstellen wollen.     
</div>
Border-Top-Left-Radius Beispiel

Wie ihr in diesem Beispiel seht, könnt ihr in den spezifischen Versionen von Border-Radius, mehrere Werte angeben.
In diesem Beispiel, gibt der erste Wert an, an welcher Stelle von links (also 150 Pixel von links), mit dem Radius begonnen werden soll und der zweite Wert, an welcher Stelle von oben, begonnen werden soll. Somit kann man auch 'flachere' bzw. 'steilere' Rundungen erstellen.

Was ihr jedoch Beachten müsst, und auch im zweiten Beispiel (mit Absicht) vorgezeigt wird, ist, dass der Text sich nicht an den Rand des Radius hält. Ihr müsst demnach dennoch mittels Padding arbeiten, damit euer Text nicht ausserhalb des Randes gerät.

Wichtig für den IE: Eure Seite sollte aufjedenfall einen gültigen Doctype besitzen, da die abgerundeten Ecken ansonsten nicht angezeigt werden.


    Veröffentlichen Sie ihre Kommentare ...