Startseite Skripte für das Wintersemester 2018/19 Webdesign Semantic Web CSS: Borders


CSS: Borders

  • Fast alle Tags lassen einen Rahmen zu
  • Es können auch einzelne Seiten angesprochen werden
  • Es stehen verschiedene „Muster“ zur Verfügung
  • Auch die Breite des Striches kann verändert werden

CSS

/* umlaufender Rand */
p {
    border-color:red;
    border-width:1px;
    border-style:solid;

    /* 
    oder in Kurzschreibweise
    Reihenfolge einhalten! 
    */
    border:1px solid red;
}

Paragraph mit rotem Rand umlaufend

CSS

/* Linie unten, gepunktet */
p {
    border-bottom-color:blue;
    border-bottom-width:3px;
    border-bottom-style:dotted;

    /* oder in Kurzschreibweise */
    border-bottom:3px dotted blue;
}

Paragraph mit Linie darunter, gepunktet

CSS

/* Linien überall, unterschiedlich breit */
p {
    border-color:#333;
    border-style:solid;

    /* Breitenangaben im Uhrzeigersinn, oben beginnend*/
    border-width:2px 40px 5px 10px;
}

Paragraph mit Linie überall

mehr zu den verschiedenen Border-Styles

Border-Styles

CSS

/* Linien nur oben und unten */
p {
    border-color:red;
    border-style:solid;

    border-top-width:1px;
    border-bottom-width:1px;

    /* 
    oder in Kurzschreibweise:
    1. Wert gilt dann für oben und unten, 2. Wert für links und rechts
    */
    border-width: 1px 0;
}

Paragraph mit rotem Rand oben/unten