Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Abgerundete Ecken mit border-radius

Abgerundete Ecken mit border-radius – Tutorial zu CSS

Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

Gratismonat starten Für Ihr Team erwerben

Abgerundete Ecken mit border-radius

“

Webseiten bestehen aus rechteckigen Kästchen, aber man kann zumindest die Ecken der Kästchen abrunden, und dazu gibt es die Eigenschaft border-radius. border-radius schreibt man so und man kann die Einheiten Pixelprozent, em oder rem verwenden. Ich schreibe jetzt einfach einmal 1rem, und dann sieht man oben schon, alle vier Ecken sind gleichmäßig abgerundet. Sie können natürlich auch Pixelwerte nehmen, also ich schreibe jetzt hier mal 4pixel, dann sieht man, das ist etwas dezenter. Und man kann das kombinieren, aber zunächst einmal möchte ich Ihnen eben zeigen, dass border-radius eigentlich eine short-hand, eine Kurzschreibweise ist für diese vier Eigenschaften border top left radius, top right, bottom right und bottom left. Das heißt, es geht also von links oben nach rechts oben, nach rechts unten, nach links unten, wenn Sie mehrere Werte verwenden. Ich schreibe jetzt einmal 4pixel und, um es ganz deutlich zu machen, 10rem, und dann sehen Sie hier, wenn man zwei Werte angibt, dann…

Inhalt