css border style
Border (border) in CSS is a feature used to determine the characteristics of borders around HTML elements. Border properties are a shortened feature (shorthand property) that allows you to determine the width, pattern, and color of borders in a single declaration.
Further details:
Border-widths:
Define the width of the border. Values can be used in pixels (px), em, or predefined values such as thin, medium, or thick.
Border-style:
Define a pattern of borders, such as solid lines, dotted lines, dashed lines, or double lines.
Border-color:
Define the color of the border. Color values can be used as color names (e.g. red, blue), color codes (e.g.# 000000), or RGB / RGB values.
Usage:
You can use the border property to assign borders to all elements, or use sub-features such as border-top, border-right, border-bottom, and border-left to assign specific borders.
Border-radius:
The border-radius property is used to determine the curvature of the angle of the border.
Example:
Code
. Elements {
Border: 2x solid red; / * 2px thick red border * / border-radius: 5px; / * 5px radius rounded angle * /
}
ถ้าคุณกำลังค้นคำว่า “border” แล้วงงว่าต้องเริ่มจากตรงไหน เราแนะนำให้จำเป็นสูตรสั้น ๆ ก่อนเลยว่า border คือการเขียน “ความหนา + รูปแบบ + สี” ในบรรทัดเดียว เช่น .element { border: 2px solid red; } แต่มีจุดที่มือใหม่พลาดบ่อยคือ “border-style ต้องมี” ถ้าเรากำหนดแค่ border-width หรือ border-color อย่างเดียว บางครั้งเส้นขอบจะไม่แสดง เพราะค่าเริ่มต้นของ border-style คือ none นั่นเอง ดังนั้นถ้าอยากให้ขึ้นแน่นอน ให้ใส่ style ไปด้วยเสมอ เช่น solid อีกอย่างที่ใช้งานจริงบ่อยมากคือการกำหนดเส้นขอบเฉพาะด้าน เช่นอยากทำเส้นใต้เหมือนไฮไลต์หัวข้อ ใช้แบบนี้จะเนียนกว่าใส่กรอบทั้งกล่อง h2 { border-bottom: 2px solid #000; } หรือถ้าทำการ์ด (card UI) แล้วอยากให้ดูเบา ๆ ลองใช้สีโปร่งด้วย rgba .card { border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; } ส่วน border-style นอกจาก dotted/dashed/solid/double ที่เจอบ่อย ยังมีสไตล์ที่ดูมีมิติ เช่น groove, ridge, inset, outset และ hidden/none ซึ่งเหมาะกับงานทดลองหรือทำเดโมให้เห็นความต่างของเส้นขอบ แต่ในการทำเว็บจริง ๆ เรามักเลือก solid/dashed เป็นหลักเพราะอ่านง่ายและเข้ากับดีไซน์ส่วนใหญ่ ทิปเล็ก ๆ ที่ช่วยจัดการงานไวขึ้น: ถ้าอยากกำหนด “ความหนาเท่ากันทุกด้าน แต่สีคนละด้าน” เราสามารถกำหนดแยกได้ เช่น .box { border-style: solid; border-width: 2px; border-color: red green blue black; } ลำดับสีจะเป็น บน-ขวา-ล่าง-ซ้าย (top right bottom left) แบบเดียวกับ padding/margin สุดท้าย ถ้าเส้นขอบดูชิดเนื้อหามากเกินไป อย่าลืมเพิ่ม padding เพราะ border จะอยู่ติดกับ content ทันที เช่น .badge { border: 1px dashed #ff4d4f; padding: 6px 10px; border-radius: 999px; } ลองเอาตัวอย่างพวกนี้ไปปรับกับองค์ประกอบจริงในหน้าเว็บ แล้วจะเข้าใจ border เร็วขึ้นมากค่ะ
