Die Eigenschaft class="w3-codespan">border-radius
wird verwendet, um abgerundete Ränder zu einem Element hinzuzufügen:
Normal border
Round border
Rounder border
Roundest border
p {
border: 2px solid red;
border-radius: 5px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
padding: 5px;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
padding: 5px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
padding: 5px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>
Alle oberen Randeigenschaften in einer Deklaration
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-top: thick double #ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
Dieses Beispiel zeigt eine Abkürzungseigenschaft zum Festlegen aller Eigenschaften für den oberen Rahmen in einer Deklaration.
Legen Sie den Stil des unteren Randes fest
<!DOCTYPE html>
<html>
<head>
<style>
p {border-style: solid;}
p.none {border-bottom-style: none;}
p.dotted {border-bottom-style: dotted;}
p.dashed {border-bottom-style: dashed;}
p.solid {border-bottom-style: solid;}
p.double {border-bottom-style: double;}
p.groove {border-bottom-style: groove;}
p.ridge {border-bottom-style: ridge;}
p.inset {border-bottom-style: inset;}
p.outset {border-bottom-style: outset;}
</style>
</head>
<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>
Dieses Beispiel zeigt, wie der Stil des unteren Rahmens festgelegt wird.
Legen Sie die Breite des linken Randes fest
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-left-width: 15px;
}
</style>
</head>
<body>
<p><b>Note:</b> The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
Dieses Beispiel zeigt, wie die Breite des linken Rahmens festgelegt wird.
Legen Sie die Farbe der vier Ränder fest
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
Dieses Beispiel zeigt, wie die Farbe der vier Rahmen festgelegt wird. Es kann eine bis vier Farben haben.
Legen Sie die Farbe des rechten Randes fest
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-right-color: #ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
Dieses Beispiel zeigt, wie die Farbe des rechten Rahmens festgelegt wird.
Legt alle Randeigenschaften in einer Deklaration fest
Legt alle Eigenschaften des unteren Randes in einer Deklaration fest
Legt die Farbe des unteren Randes fest
Legt den Stil des unteren Rahmens fest
Legt die Breite des unteren Randes fest
Legt die Farbe der vier Ränder fest
Legt alle Eigenschaften des linken Randes in einer Deklaration fest
Legt die Farbe des linken Randes fest
Legt den Stil des linken Rahmens fest
Legt die Breite des linken Randes fest
Legt alle vier border-*-radius-Eigenschaften für abgerundete Ecken fest
Legt alle richtigen Randeigenschaften in einer Deklaration fest
Legt die Farbe des rechten Randes fest
Legt den Stil des rechten Rahmens fest
Legt die Breite des rechten Randes fest
Legt den Stil der vier Rahmen fest
Legt alle Eigenschaften des oberen Randes in einer Deklaration fest
Legt die Farbe des oberen Randes fest
Legt den Stil des oberen Rahmens fest
Legt die Breite des oberen Randes fest
Legt die Breite der vier Ränder fest