คุณสมบัติ CSS Border Properties คู่มือครบครัน

คุณสมบัติ border เป็น shorthand รวม border-width, border-style, border-color สามารถจัดสไตล์แต่ละด้านแยกได้ด้วย border-top, border-right, border-bottom, border-left

Syntax

Selector { border: <width> <style> <color>; }

ตัวอย่างที่ 1: Border รูปทรงกลม พร้อมขอบด้านข้างต่างกัน

<!DOCTYPE html> <html> <head> <style> div {    border-style: solid;    margin: auto;    padding: 5px;    border-radius: 50%; } #main {    height: 100px;    width: 100px;    border-left: 12px ridge goldenrod;    border-right: 12px ridge goldenrod; } #main > div {    line-height: 12px;    height: 30px;    width: 10px;    padding: 27px 20px;    border-top: 6px groove crimson;    border-bottom: 6px ridge crimson; } </style> </head> <body> <div id="main"> <div>i see you</div> </div> </body> </html>

ตัวอย่างที่ 2: Border บน Paragraph พร้อม Border-radius และ Background Image

<!DOCTYPE html> <html> <head> <style> p {    width: 60%;    margin: auto;    padding: 20px 45px;    border-top-width: 1.4em;    border-top-style: solid;    border-top-color: violet;    border-radius: 85px 85px 0 0;    color: black;    font-size: 1.3em;    background-image: url("https://www.tutorialspoint.com/images/css.png"); } </style> </head> <body> <p>CSS is used to control the style of a web document in a simple way. It handles the look and feel part of a web page.</p> </body> </html>

คำอธิบาย

ตัวอย่างที่ 1: สร้างวงกลมด้วย border-radius: 50% แล้วกำหนดขอบซ้าย/ขวาเป็น ridge สี goldenrod ขอบบน/ล่างของ div ภายในเป็น groove/ridge สี crimson

ตัวอย่างที่ 2: Paragraph มี border-top เพียงด้านเดียว กว้าง 1.4em สีม่วง พร้อม border-radius มุมบนโค้ง มุมล่างฉาก และมี background image

Border Styles ทั้งหมด:

Border Shorthand แบบละเอียด:

/* 3 ค่า */
border: 2px solid red;

/* ด้านเดียว */
border-top: 2px solid red;
border-right: 2px dashed blue;

/* ระดับละเอียด */
border-width: 2px;
border-style: solid;
border-color: red;

/* Logical properties (ใหม่) */
border-inline-start: 2px solid red; /* เริ่มต้นของ inline axis */
border-block-end: 2px solid blue;   /* สิ้นสุดของ block axis */