class="w3-codespan">border-radius คุณสมบัติที่ใช้ในการเพิ่มเส้นขอบโค้งมนให้กับองค์ประกอบ:
Normal border
Round border
Rounder border
Roundest border
p {
border: 2px solid red;
border-radius: 5px;
}ลองด้วยตัวคุณเอง →
<!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>
คุณสมบัติเส้นขอบด้านบนทั้งหมดในการประกาศเดียว
<!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>
ตัวอย่างนี้แสดงให้เห็นถึงคุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติทั้งหมดสำหรับเส้นขอบด้านบนในการประกาศครั้งเดียว
กำหนดรูปแบบของเส้นขอบด้านล่าง
<!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>
ตัวอย่างนี้สาธิตวิธีการตั้งค่ารูปแบบของเส้นขอบด้านล่าง
กำหนดความกว้างของเส้นขอบด้านซ้าย
<!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>
ตัวอย่างนี้สาธิตวิธีการตั้งค่าความกว้างของเส้นขอบด้านซ้าย
กำหนดสีของเส้นขอบทั้งสี่
<!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>
ตัวอย่างนี้สาธิตวิธีการตั้งค่าสีของเส้นขอบทั้งสี่ สามารถมีได้ตั้งแต่หนึ่งถึงสี่สี
กำหนดสีของเส้นขอบด้านขวา
<!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>
ตัวอย่างนี้สาธิตวิธีการตั้งค่าสีของเส้นขอบด้านขวา
ตั้งค่าคุณสมบัติเส้นขอบทั้งหมดในการประกาศเดียว
ตั้งค่าคุณสมบัติเส้นขอบด้านล่างทั้งหมดในการประกาศเดียว
กำหนดสีของเส้นขอบด้านล่าง
กำหนดรูปแบบของเส้นขอบด้านล่าง
กำหนดความกว้างของเส้นขอบด้านล่าง
กำหนดสีของเส้นขอบทั้งสี่
ตั้งค่าคุณสมบัติเส้นขอบด้านซ้ายทั้งหมดในการประกาศเดียว
กำหนดสีของเส้นขอบด้านซ้าย
กำหนดรูปแบบของเส้นขอบด้านซ้าย
กำหนดความกว้างของเส้นขอบด้านซ้าย
ตั้งค่าคุณสมบัติ border-*-radius ทั้งสี่สำหรับมุมโค้งมน
ตั้งค่าคุณสมบัติเส้นขอบที่ถูกต้องทั้งหมดในการประกาศครั้งเดียว
กำหนดสีของเส้นขอบด้านขวา
กำหนดรูปแบบของเส้นขอบด้านขวา
กำหนดความกว้างของเส้นขอบด้านขวา
กำหนดรูปแบบของเส้นขอบทั้งสี่
ตั้งค่าคุณสมบัติเส้นขอบด้านบนทั้งหมดในการประกาศเดียว
กำหนดสีของเส้นขอบด้านบน
กำหนดรูปแบบของเส้นขอบด้านบน
กำหนดความกว้างของเส้นขอบด้านบน
กำหนดความกว้างของเส้นขอบทั้งสี่