คุณสมบัติเส้นขอบ CSS ใช้เพื่อกำหนดคุณสมบัติเส้นขอบสำหรับองค์ประกอบ มันเป็นชวเลขสำหรับความกว้างของเส้นขอบ สไตล์เส้นขอบ และสีเส้นขอบ กำหนดรูปแบบเส้นขอบสำหรับแต่ละด้านได้ และกำหนดรัศมีเส้นขอบได้
ในทางกลับกัน โครงร่าง CSS จะไม่กินเนื้อที่และจะแสดงรอบๆ เส้นขอบหากมีการตั้งค่าไว้ รองรับการชดเชย นอกจากนี้ เราไม่สามารถระบุได้ว่าแต่ละด้านควรมีโครงร่างหรือไม่
โดยค่าเริ่มต้น ทั้งเส้นขอบและโครงร่างจะไม่แสดง
ไวยากรณ์
ไวยากรณ์สำหรับคุณสมบัติเส้นขอบและเค้าร่าง CSS มีดังต่อไปนี้ -
Selector {
border: /*value*/
outline: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติเส้นขอบและโครงร่าง CSS -
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 15px;
padding: 20px;
width: 35%;
border: thin solid green;
outline-width: 5px;
outline-style: ridge;
outline-color: fuchsia;
border-radius: 50px;
}
</style>
</head>
<body>
<h2>Example</h2>
<div>This is it!</div>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 40px;
padding: 12px;
width: 30%;
border: thick dashed green;
outline: 5px inset;
outline-color: fuchsia;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text surrounded by border and outline.</p>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
