Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Lösung zur Aufgabe zu abgerundeten Ecken mit CSS3 border-radius

Im Folgenden wird die Lösung zur Aufgabe mit den abgerundeten Ecken, über den CSS3-Befehl border-radius gezeigt. Es wird folgendes Aussehen erstellt.

Aufgabelösung CSS3-Befehl border-radius
Aufgabelösung CSS3-Befehl border-radius

Im ersten Schritt benötigen wir das HTML5-Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
  <title>CSS3: border-radius</title>
  <meta charset="UTF-8">
  <link href="css3-abgerundete-ecken.css" rel="stylesheet">
</head>

<body>

</body>
</html>

Für unseren Bereich mit den abgerundeten Ecken benötigen wir einen DIV-Container, der zum Ansprechen über CSS die ID „box1“ bekommt.

<div id="box1">
    Box mit abgerundeten Ecken
</div>

Im CSS-Bereich geben wir der Box als erstes eine Hintergrundfarbe mit, damit wir die Verbindung zwischen HTML- und CSS-Datei kontrollieren können.

#box1 {
    background-color: silver;
}

Jetzt geben wir eine Breite von 150 Pixel mit und eine Höhe von 150 Pixel. Um die Box frei platzieren zu können, nutzen wir position: absolute und einen Abstand von oben mit code>top von 100 Pixel und von links über left mit 100 Pixel. Zusätzlich bekommt die Box einen schwarzen Rahmen mit 1 Pixel Stärke.

#box1 {
    background-color: silver;
    position: absolute;
    top: 100px;
    left: 100px;
    width: 150px;
    height: 150px;
    border: 1px solid black;
}

Jetzt können wir einfach über die CSS3-Anweisung border-radius unsere Rundung mitgeben.

#box1 {
    background-color: silver;
    position: absolute;
    top: 100px;
    left: 100px;
    width: 150px;
    height: 150px;
    border: 1px solid black;

    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
}

Hier werden auch gleich die entsprechenden Anweisungen für -moz und -webkit mitgegeben und danach der Standard-Befehl border-radius.

Unser Text in der Box wird noch vom Rahmen angeschnitten.

Text wird von border-radius unschön angeschnitten
Text wird von border-radius unschön angeschnitten

Das können wir über CSS verhindern. Wir geben der Box einen Innenabstand mit und alles passt.

#box1 {
    padding: 20px;
}

Und somit haben wir eine saubere Lösung für unseren Text in einer Box mit abgerundeten Ecken.

Fertige Lösung mit abgerundeten Ecken über border-radius
Fertige Lösung mit abgerundeten Ecken über border-radius

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe