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
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