โครงร่างไม่ใช้พื้นที่และจะแสดงรอบๆ เส้นขอบหากตั้งค่าไว้ ใช้สำหรับเน้นองค์ประกอบและเราไม่สามารถระบุได้ว่าแต่ละด้านควรมีโครงร่างหรือไม่ เช่นเดียวกับเส้นขอบ โครงร่างจะไม่แสดงตามค่าเริ่มต้น ในบางเบราว์เซอร์ อย่างเช่น Firefox องค์ประกอบที่เน้นจะแสดงเป็นเส้นบางๆ
เส้นขอบสามารถปรับแต่งได้มากขึ้น เราจัดแต่งขอบแต่ละด้านของเส้นขอบและปัดที่ขอบ เส้นขอบใช้พื้นที่และส่งผลต่อการปรับขนาดกล่อง
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติเส้นขอบ CSS มีดังต่อไปนี้ -
Selector {
border: /*value*/
outline: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงคุณสมบัติเค้าร่าง CSS และเส้นขอบ -
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: flex;
float: left;
margin: 20px;
padding: 12px;
width: 30%;
outline: thin dotted;
background-color: lavender;
}
p + p {
width: 250px;
outline: none;
border: outset;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995.</p>
<p>Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. Java is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Software Development Domain</p>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: auto;
width: 70%;
outline: thick double;
background-color: lightgoldenrodyellow;
}
h3 {
border: inset;
}
</style>
</head>
<body>
<h3>Kotlin Tutorial</h3>
<article>Kotlin is a programming language introduced by JetBrains, the official designer of the most intelligent Java IDE, named Intellij IDEA. This is a strongly statically typed language that runs on JVM. In 2017, Google announced Kotlin is an official language for android development. Kotlin is an open source programming language that combines object-oriented programming and functional features into a unique platform.</article>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
