วิธีสร้างและจัดสไตล์เส้นขอบด้วย CSS Border Property

คุณสมบัติ border ใน CSS ใช้กำหนดและจัดสไตล์เส้นขอบของ element เป็น shorthand ของ border-width, border-style, border-color รองรับรูปภาพเป็นขอบผ่าน border-image ด้วย

Syntax

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

ตัวอย่างที่ 1: Border Image (รูปภาพเป็นขอบ)

<!DOCTYPE html> <html> <head> <style> p {    border: 70px solid transparent;    margin: 15px;    padding: 3px;    border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30 round;    background-color: beige; } </style> </head> <body> <p>TensorFlow is an open source machine learning framework for all developers. It is used for implementing machine learning and deep learning applications.</p> </body> </html>

ตัวอย่างที่ 2: Border 複雜 (Complex Border) พร้อม Gradient และ Border-radius

<!DOCTYPE html> <html> <head> <style> #d1 {    margin: auto;    width: 60%;    border: 4px solid sienna;    padding: 10px;    background-image: linear-gradient(133deg, #a4c888, #2343e2, #33b329, #d10373);    border-radius: 55px 100px 2px 95px; } #d2 {    border: 1.5px solid rosybrown;    padding: 10px;    border-radius: 205px 500px; } img {    border-radius: 3% 50%;    display: block;    margin: auto; } </style> </head> <body> <div id="d1"> <div id="d2"> <img src="https://www.tutorialspoint.com/openshift/images/openshift-mini-logo.jpg" > </div> </div> </body> </html>

คำอธิบาย

ตัวอย่างที่ 1: ใช้ border-image กับรูปภาพ TensorFlow ค่า 30 round = slice 30px และ repeat แบบ round (ปรับขนาดให้พอดี)

ตัวอย่างที่ 2: ใช้ linear-gradient เป็น background พร้อม border-radius แบบ 8 ค่า (แนวนอน 4 มุม, แนวตั้ง 4 มุม) สร้างรูปทรงออร์แกนิก

Border-image Properties:

Border-radius 8 ค่า (แยกแนวนอน/แนวตั้ง):

border-radius: 
  tl-horizontal tr-horizontal br-horizontal bl-horizontal /
  tl-vertical   tr-vertical   br-vertical   bl-vertical;