Thuộc Tính Border | CSS - Học Web Chuẩn

Thuộc tính border

• Trang chủ
• Tham khảo
• CSS
• Thuộc tính border

Định nghĩa và sử dụng

Thuộc tính border được dùng để định dạng đường viền cho thành phần.

Cấu trúc

tag { Thuộc tính: giá trị; }

Với thuộc tính và giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
Thuộc tính định dạng
border-color	mã màu tên màu Giá trị rgb	border-color: #ff0000; border-color: red; border-color: rgb(255,0,0);	Xác định màu sắc của đường viền.
border-style	kiểu border	border-style: solid;	Xác định hình dạng của đường viền.
border-width	px thin medium thick	border-width: 5px;	Xác định bề dày của đường viền.
Thuộc tính vị trí
border-top	Một hoặc nhiều giá trị của các thuộc tính định dạng.	border-top: #ff0000 solid 2px;	Xác định đường viền bên trên.
border-right	Một hoặc nhiều giá trị của các thuộc tính định dạng.	border-right: #ff0000 solid 2px;	Xác định đường viền bên phải.
border-bottom	Một hoặc nhiều giá trị của các thuộc tính định dạng.	border-bottom: #ff0000 solid 2px;	Xác định đường viền bên dưới.
border-left	Một hoặc nhiều giá trị của các thuộc tính định dạng.	border-left: #ff0000 solid 2px;	Xác định đường viền bên trái.
border	Một hoặc nhiều giá trị của các thuộc tính định dạng.	border: #ff0000 solid 2px;	Xác định tất cả các đường viền xung quanh.
Kết hợp giữa thuộc tính vị trí và thuộc tính định dạng
border-top-color	mã màu tên màu Giá trị rgb	border-top-color: #ff0000; border-top-color: red; border-top-color: rgb(255,0,0);	Xác định màu sắc cho đường viền bên trên.
border-top-style	kiểu border	border-top-style: solid;	Xác định hình dạng cho đường viền bên trên.
border-top-width	px thin medium thick	border-top-width: 5px;	Xác định bề dày cho đường viền bên trên.
border-right-color	mã màu tên màu Giá trị rgb	border-right-color: #ff0000; border-right-color: red; border-right-color: rgb(255,0,0);	Xác định màu sắc cho đường viền bên phải.
border-right-style	kiểu border	border--right-style: solid;	Xác định hình dạng cho đường viền bên phải.
border-right-width	px thin medium thick	border-right-width: 5px;	Xác định bề dày cho đường viền bên phải.
border-bottom-color	mã màu tên màu Giá trị rgb	border-bottom-color: #ff0000; border-bottom-color: red; border-bottom-color: rgb(255,0,0);	Xác định màu sắc cho đường viền bên dưới.
border-bottom-style	kiểu border	border-bottom-style: solid;	Xác định hình dạng cho đường viền bên dưới.
border-bottom-width	px thin medium thick	border-bottom-width: 5px;	Xác định bề dày cho đường viền bên dưới.
border-left-color	mã màu tên màu Giá trị rgb	border-left-color: #ff0000; border-left-color: red; border-left-color: rgb(255,0,0);	Xác định màu sắc cho đường viền bên trái.
border-left-style	kiểu border	border-left-style: solid;	Xác định hình dạng cho đường viền bên trái.
border-left-width	px thin medium thick	border-left-width: 5px;	Xác định bề dày cho đường viền bên trái.
border-color	mã màu tên màu Giá trị rgb	border-color: #ff0000; border-color: red; border-color: rgb(255,0,0);	Xác định màu sắc cho tất cả các đường viền xung quanh.
border-style	kiểu border	border-style: solid;	Xác định hình dạng cho tất cả các đường viền xung quanh.
border-width	px thin medium thick	border-width: 5px;	Xác định chiều rộng cho tất cả các đường viền xung quanh.

Kiểu cho border:

giá trị	Ví dụ	Mô tả	Hiển thị
none	border: none;	Xác định thành phần sẽ không có đường viền.	Đường viền hiển thị
hidden	border: hidden;	Giống như giá trị none, nhưng được dùng cho table.	Đường viền hiển thị
dotted	border: dotted;	Xác định đường viền cho thành phần là dấu chấm (dotted).	Đường viền hiển thị
dashed	border: dashed;	Xác định đường viền cho thành phần là gạch ngang (dashed).	Đường viền hiển thị
solid	border: solid;	Xác định đường viền cho thành phần là đường thẳng nét (solid).	Đường viền hiển thị
double	border: double;	Xác định đường viền cho thành phần là 2 đường thẳng nét (double).	Đường viền hiển thị
groove	border: groove;	Xác định đường viền cho thành phần là đường rãnh (groove).	Đường viền hiển thị
ridge	border: ridge;	Xác định đường viền cho thành phần là đường chóp (ridge).	Đường viền hiển thị
inset	border: inset;	Xác định đường viền cho thành phần là đường bóng bên trong (inset).	Đường viền hiển thị
outset	border: outset;	Xác định đường viền cho thành phần là đường bóng bên ngoài (outset).	Đường viền hiển thị
inherit	border: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).	Đường viền hiển thị

Tuy sử dụng rất nhiều thuộc tính như vậy, nhưng chúng ta chỉ cần chú ý đến các "thuộc tính vị trí" là có thể sử dụng được tất cả các dạng cần thiết, chỉ những trường hợp riêng biệt mới cần sử dụng tới các "thuộc tính định dạng".

Cấu trúc như sau:

tag { Thuộc tính: width style color; }

Chú ý: width, style, color có thể theo thứ tự bất kỳ.

Ví dụ border-top

Xem thêm ví dụ

HTML viết:

<html> <head></head> <body> <p>Đây là tag p có border top 2px dạng solid màu đỏ.</p> </body> </html>

CSS viết:

p { border-top: 2px solid #ff0000; }

Hiển thị trình duyệt:

Đây là tag p có border top 2px dạng solid màu đỏ.

Ví dụ border-right

Xem thêm ví dụ

HTML viết:

<html> <head></head> <body> <p>Đây là tag p có border right 2px dạng solid màu đỏ.</p> </body> </html>

CSS viết:

p { border-right: 2px solid #ff0000; }

Hiển thị trình duyệt:

Đây là tag p có border right 2px dạng solid màu đỏ.

Ví dụ border-bottom

Xem thêm ví dụ

HTML viết:

<html> <head></head> <body> <p>Đây là tag p có border bottom 2px dạng solid màu đỏ.</p> </body> </html>

CSS viết:

p { border-bottom: 2px solid #ff0000; }

Hiển thị trình duyệt:

Đây là tag p có border bottom 2px dạng solid màu đỏ.

Ví dụ border-left

Xem thêm ví dụ

HTML viết:

<html> <head></head> <body> <p>Đây là tag p có border left 2px dạng solid màu đỏ.</p> </body> </html>

CSS viết:

p { border-left: 2px solid #ff0000; }

Hiển thị trình duyệt:

Đây là tag p có border left 2px dạng solid màu đỏ.

Ví dụ border

Xem thêm ví dụ

HTML viết:

<html> <head></head> <body> <p>Đây là tag p có border 2px dạng solid màu đỏ.</p> </body> </html>

CSS viết:

p { border: 2px solid #ff0000; }

Đây là dạng kết hợp của 4 thuộc tính vị trí trên, bao gồm cả: border-top, border-right, border-bottom, border-left.

Hiển thị trình duyệt:

Đây là tag p có border 2px dạng solid màu đỏ.

Trình duyệt hỗ trợ

• 
• 
• 
• 
• 

Thuộc tính border được hỗ trợ trong đa số các trình duyệt.

Link liên quan

• HTML/XHTML
• CSS
• <html></html>
• <head></head>
• <body></body>
• <p></p>

background

border-collapse

CSS

HƯỚNG DẪN HỌC

• Hướng dẫn học
• Hướng dẫn học XHTML & HTML5
• Hướng dẫn học CSS
• Hướng dẫn học CSS3
• Hướng dẫn học Responsive
• Hướng dẫn học ES6
• Hướng dẫn học React.js
• Hướng dẫn học jQuery
• Hướng dẫn học PHP
• Hướng dẫn học Laravel
• Hướng dẫn học Wordpress
• Hướng dẫn học Webpack
• Hướng dẫn học SCSS

THAM KHẢO

Thuộc tính CSS

• background
• border
• border-collapse
• border-spacing
• bottom
• caption-side
• clear
• clip
• color
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• float
• font
• height
• left
• letter-spacing
• line-height
• list-style
• margin
• max-height
• max-width
• min-height
• min-width
• outline
• overflow
• padding
• page-break-after
• page-break-before
• page-break-inside
• position
• quotes
• right
• table-layout
• text-align
• text-decoration
• text-indent
• text-transform
• top
• vertical-align
• visibility
• white-space
• width
• word-spacing
• z-index

Tham khảo CSS

• CSS - Tham khảo
• CSS - Bộ chọn (selectors)
• CSS - Thuộc tính
• CSS3 - Tham khảo
• CSS3 - Bộ chọn (selectors)
• CSS3 - Thuộc tính
• Xem thêm ví dụ về CSS

Tham khảo HTML/XHTML

• Tham khảo HTML/XHTML
• Tag theo function
• Tag theo giá trị DTD
• Tham khảo HTML4/XHTML
• Tham khảo HTML5
• Xem thêm ví dụ về HTML

Tham khảo JQUERY

• jQuery - Tham khảo
• jQuery - Cài đặt và sử dụng
• jQuery - Bộ chọn (selectors)
• jQuery - Hàm (function)
• jQuery - Ajax

Tham khảo Thêm

• Lang codes
• Font chữ
• Mã ký tự
• MIME
• Đơn vị trong HTML & CSS
• Giá trị màu trong HTML & CSS
• Thuộc tính tổng quát

CHUYÊN ĐỀ

• Chuyên đề
• Chuyên đề HTML/CSS
• Chuyên đề HTML5/CSS3
• Chuyên đề jQuery/JS
• jQuery/JS plugin

Góp ý - Liên hệ

• CÔNG CỤ TẠO CSS3CSS3 GENERATOR
• BỘ CÔNG CỤGENERATOR TOOLS
• CÔNG CỤ HỖ TRỢWEB TOOLS
• CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
• CÔNG CỤ KIỂM TRA RESPONSIVE TEST
• CHIA SẺ HAYWEB & TOOLS

• 
• 
•