Egenskapen class="w3-codespan">border-radius
används för att lägga till rundade gränser till ett element:
Normal border
Round border
Rounder border
Roundest border
p {
border: 2px solid red;
border-radius: 5px;
}
Prova själv →
<!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>
Alla de översta gränsegenskaperna i en 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>
Det här exemplet visar en förkortningsegenskap för att ställa in alla egenskaper för den övre kanten i en deklaration.
Ställ in stilen på den nedre kanten
<!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>
Det här exemplet visar hur du ställer in stilen för den nedre kanten.
Ställ in bredden på vänster kant
<!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>
Det här exemplet visar hur du ställer in bredden på den vänstra kanten.
Ställ in färgen på de fyra ramarna
<!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>
Det här exemplet visar hur man ställer in färgen på de fyra ramarna. Den kan ha från en till fyra färger.
Ställ in färgen på den högra kanten
<!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>
Det här exemplet visar hur man ställer in färgen på den högra kanten.
Ställer in alla gränsegenskaper i en deklaration
Anger alla nedre kantegenskaper i en deklaration
Ställer in färgen på den nedre kanten
Ställer in stilen för den nedre kanten
Ställer in bredden på den nedre kanten
Ställer in färgen på de fyra ramarna
Ställer in alla egenskaper för vänster kant i en deklaration
Ställer in färgen på den vänstra kanten
Ställer in stilen för den vänstra kanten
Ställer in bredden på vänster kant
Ställer in alla fyra egenskaperna för kant-*-radie för rundade hörn
Ställer in alla rätt gränsegenskaper i en deklaration
Ställer in färgen på den högra kanten
Ställer in stilen för den högra kanten
Ställer in bredden på den högra kanten
Ställer in stilen för de fyra ramarna
Ställer in alla övre kantegenskaper i en deklaration
Ställer in färgen på den övre kanten
Ställer in stilen för den övre kanten
Ställer in bredden på den övre kanten
Ställer in bredden på de fyra ramarna