Begriffe Grundgerüst Wichtige HTML-Tags CSS Arbeitsaufträge

Border Radius

Es ist möglich, die Ecken der Umrandung abzurunden. Es gibt dafuer vier verschiedene Syntaxen:

• border-radius: 10px
  --> alle Ecken haben einen Radius von 10px
• border-radius: 10px 20px
  --> beide oberen Ecken haben einen Radius von 10px, beide unteren Ecken haben einen Radius von 20px
• border-radius: 10px 20px 30px
  --> die obere linke Ecke hat einen Radius von 10px, die obere rechte und die untere linke Ecke haben einen Radius von 20px und die untere rechte Ecke hat einen Radius von 30px
• border-radius: 10px 20px 30px 40px
  --> die obere linke Ecke hat einen Radius von 10px, die obere rechte Ecke haben einen Radius von 20px, die untere rechte Ecke hat einen Radius von 30px und die untere linke Ecke hat einen Radius von 40px

Unten folgen zuerst vier generische Beispiele analog zu den obigen Syntaxen und dann einige tats�chliche Beispiele. Damit die Umrandung sichtbar wird, muss sie zuerst aktiviert werden.

selector {
  border-radius: value1;
  border-radius: value1 value2;
  border-radius: value1 value2 value3;
  border-radius: value1 value2 value3 value4;
}

<h1 style="border: 3px solid blue; border-radius: 20px">Titel mit Radius von 20 Pixel<h1>

<h1 style="border: 1px solid darkgreen; border-radius: 10px 20px">Titel mit 2 Radien<h1>

<h1 style="border: 10px solid darkgreen; border-radius: 10px 20px 40px">Titel mit 3 Radien<h1>

<img src="/html/img/bg.jpg" style="width: 200px; border-radius: 10px 20px 40px 80px">