Mit der CSS border Eigenschaft bestimmt man den Style, die Weite und die Farbe vom Element-Border(Grenzen).
Die CSS Border-Style Eigenschaft:
Die border-style Eigenschaft bestimmt welche Art von Grenzen(Border) dargestellt werden.
Die folgenden Werte sind erlaubt:
dotted
dashed
solid
double
groove-Effekt
ridge-Effekt
inset-Effekt
outset-Effekt
Die border-style Eigenschaft bestimmt die Art des Rahmen oben , rechts , unten oder links.
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
Die border-width Eigenschaft bestimmt die Weite des borders(Grenzen).
border-width: 5px;
border-width: 5px 20px; (5px oben und unten, 20px an den Seiten)
border-width: 5px 20px 5px 20px; (5px oben und unten, 20px an den Seiten.)
Die border-color Eigenschaft bestimmt die Farbe des borders(Grenzen).
border-color: red;
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>Die border-style Eigenschaft</h2>
<p>Diese Eigenschaft bestimmt welche Art von Rahmen dargestellt wird:</p>
<p class="dotted">einen gepunkteten Rahmen.</p>
<p class="dashed">einen gestrichelten Rahmen.</p>
<p class="solid">ein durchgezogener Rahmen.</p>
<p class="double">Einen doppelten Rahmen.</p>
<p class="groove">einen Rahmen mit 3D-Effekt.</p>
<p class="ridge">einen Rahmen mit 3D-Effekt.</p>
<p class="inset">einen Rahmen mit 3D-Effekt.</p>
<p class="outset">einen Rahmen mit 3D-Effekt.</p>
<p class="mix">einen gemixten Rahmen.</p>
</body>
</html>
Die border-width Eigenschaft bestimmt die Weite des borders(Grenzen).
border-width: 20px;
border-width: 20px 5px; (20px oben und unten, 5px an den Seiten)
border-width: 25px 10px 4px 35px; (25px oben, 10px rechts, 4px unten und 35px links.)
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 20px; /* 20px alle Seiten */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px oben und unten, 5px an den Seiten */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px oben, 10px rechts, 4px unten und 35px links */
}
</style>
</head>
<body>
<h2>Die border-width Eigneschaft</h2>
<p>Die border-width Eigenschaft kann eine bis vier Werte haben (für den Rahmen oben, rechter Rahmen, Rahmen unten und Rahmen links):</p>
<p class="one">einiger Text.</p>
<p class="two">einiger Text.</p>
<p class="three">einiger Text.</p>
</body>
</html>
Die border-color Eigenschaft bestimmt die Farbe eines Rahmens.
Die Farbe kann definiert weren mit:
Name"rot".
HEX, wie "#ff0000".
RGB, wie "rgb(255,0,0)"
HSL, wie "hsl(0, 100%, 50%)"
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: orange;
}
p.two {
border-style: solid;
border-color: grey;
}
p.three {
border-style: solid;
border-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Die border-color Eigneschaft</h2>
<p>Die border-color Eigenschaft bestimmt die Farbe des Rahmens:</p>
<p class="one">einiger Text.</p>
<p class="two">einiger Text.</p>
<p class="three">einiger Text.</p>
</body>
</html>
In CSS kann jede Seite einzeln spezifiziert werden (oben , rechts , unten und links):
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<h2>Individuelle Border-Seiten</h2>
<p>2 unterschiedliche border-Style.</p>
</body>
</html>
Um den Code zu kürzen, ist es möglich die einzelnen border Eigenschaften in Kurzschrift auszugeben.
Diese Eigenschaft ist ein Kurzschrift für border-width, border-style und border-color.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid dodgerblue;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Die border Eigenschaft</h2>
<p>Diese Eigenschaft ist ein Kurzschrift für border-width, border-style und border-color.</p>
