With the CSS border-radius property, you can give any element "rounded corners".
ซีเอสเอส border-radius คุณสมบัติกำหนดรัศมีของ มุมขององค์ประกอบ
เคล็ดลับ: คุณสมบัตินี้ช่วยให้คุณสามารถเพิ่มมุมโค้งมนได้ องค์ประกอบ!
นี่คือสามตัวอย่าง:
1. มุมโค้งมนสำหรับองค์ประกอบที่มีสีพื้นหลังที่ระบุ:
Rounded corners!
2. มุมโค้งมนสำหรับองค์ประกอบที่มีเส้นขอบ:
Rounded corners!
3. มุมโค้งมนสำหรับองค์ประกอบที่มีภาพพื้นหลัง:
Rounded corners!
นี่คือรหัส:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>
เคล็ดลับ: คุณสมบัติ border-radius จริงๆ แล้วเป็นคุณสมบัติชวเลขสำหรับ <รหัส class="w3-codespan">border-top-left-radius, border-top-right-radius, รัศมีเส้นขอบล่างขวา และคุณสมบัติ border-bottom-left-radius
คุณสมบัติ border-radius สามารถมีได้จากที่หนึ่ง ถึงสี่ค่า นี่คือกฎ:
ค่าสี่ค่า - รัศมีเส้นขอบ: 15px 50px 30px 5px; (ค่าแรกใช้กับมุมซ้ายบน ค่าที่สองใช้กับมุมขวาบน ค่าที่สามใช้กับมุมขวาล่าง และค่าที่สี่ ใช้กับมุมซ้ายล่าง):
สามค่า - รัศมีเส้นขอบ: 15px 50px 30px; (ค่าแรกใช้กับมุมซ้ายบน ค่าที่สองใช้กับมุมบนขวาและซ้ายล่าง และค่าที่สามใช้กับมุมล่างขวา ):
สองค่า - รัศมีเส้นขอบ: 15px 50px; (ค่าแรกใช้กับมุมซ้ายบนและมุมขวาล่าง และค่าที่สองใช้กับมุมบนขวาและซ้ายล่าง):
หนึ่งค่า - border-radius: 15px; (ค่านี้ใช้กับทั้งสี่มุม ซึ่งจะถูกปัดเศษเท่าๆ กัน:
นี่คือรหัส:
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>
<p>Three values - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>
<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>
<p>One value - border-radius: 15px:</p>
<p id="rcorners4"></p>
</body>
</html>
คุณสามารถสร้างมุมวงรีได้เช่นกัน:
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Elliptical border - border-radius: 50px / 15px:</p>
<p id="rcorners1"></p>
<p>Elliptical border - border-radius: 15px / 50px:</p>
<p id="rcorners2"></p>
<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners3"></p>
</body>
</html>
คุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติ border-*-*-radius ทั้งสี่
กำหนดรูปร่างของเส้นขอบของมุมซ้ายบน
กำหนดรูปร่างของเส้นขอบของมุมบนขวา
กำหนดรูปร่างของเส้นขอบของมุมล่างขวา
กำหนดรูปร่างของเส้นขอบของมุมซ้ายล่าง