Radius (border-radius)

Einer meiner Favoriten der CSS-Eigenschaften ist der border-radius. Anhand einiger Beispiele ein kleiner Überblick:


Ecken abrunden

#rundeecken {
  border-radius: 5px;  /* alle 4 ecken werden gerundet */
}

#rundeecken {
  border-top-right-radius: 5px;  /* rechte obere Ecke wird gerundet */
  border-top-left-radius: 5px;  /* linke obere Ecke wird gerundet */
  border-bottom-right-radius: 5px;  /* rechte untere Ecke wird gerundet */
  border-bottom-left-radius: 50px;  /* linke untere Ecke wird gerundet */
}

Beispiel Ecken abrunden



Viertel-, Halb- und Vollkreis

#viertelkreis {
  width: 150px;
  height: 150px;
  border-top-left-radius: 150px;  /* radius einer Ecke gleich wie die Seitenlänge eines Quadrats */
}

Beispiel Viertelkreis



#halbkreis {
  width: 150px;  /* doppelte Länge eines Eckradius */
  height: 75px;
  border-top-left-radius: 75px;  /* hier die Hälfte der Seitenlänge des Rechtecks */
  border-top-right-radius: 75px;  /*hier die Hälfte der Seitenlänge des Rechtecks */
}

Beispiel Halbkreis


#vollkreis {
  width: 150px;
  height: 150px;
  border-radius: 75px;  /* hier die Hälfte der Seitenlänge eines Quadrats */
}

Beispiel Vollkreis

 

 

 

 

Einige Seiten um Farbcodes und Farbschemas zu...

Weiterlesen

Einer meiner Favoriten der CSS-Eigenschaften ist...

Weiterlesen

Medientypen werden benötigt, um verschiedene...

Weiterlesen

opacity - der Gesamte Inhalt wird transparent...

Weiterlesen