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

 

 

 

 

Zuerst müssen die js Dateien im Setup des...

Weiterlesen

Um ein Eingabefeld auf einer bestimmten Stelle der...

Weiterlesen

Eine Anleitung und die dazugehörigen Dateien...

Weiterlesen

Einige Seiten um Farbcodes und Farbschemas zu...

Weiterlesen

Mit dem backstretch script lässt sich eine simple...

Weiterlesen

 

Ein einfaches horizontales Menü in Typo3 kann...

Weiterlesen

Für die Suchmaschinenoptimierung nicht...

Weiterlesen

Einer meiner Favoriten der CSS-Eigenschaften ist...

Weiterlesen

Im Allgemeinen kann ein META-Tag für den...

Weiterlesen

Die robots.txt dient dazu, um das Suchverhalten...

Weiterlesen