Đị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 định dạng | |||
border-color | mã màu tên màu Giá trị rgb tên màu Giá trị rgb | border-color: #ff0000; border-color: red; border-color: rgb[255,0,0]; 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 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-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-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-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-top: #ff0000 solid 2px; | Xác định đường viền bên trên. |
border-right | |||
border-right: #ff0000 solid 2px; | mã màu tên màu Giá trị rgb tên màu Giá trị rgb | border-color: #ff0000; border-color: red; border-color: rgb[255,0,0]; border-top-color: red; border-top-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 thin medium thick | border-width: 5px; | Xác định bề dày của đường viền. |
Thuộc tính vị trí | mã màu tên màu Giá trị rgb tên màu Giá trị rgb | border-color: #ff0000; border-color: red; border-color: rgb[255,0,0]; border-right-color: red; border-right-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 thin medium thick | border-width: 5px; | Xác định bề dày của đường viền. |
Thuộc tính vị trí | mã màu tên màu Giá trị rgb tên màu Giá trị rgb | border-color: #ff0000; border-color: red; border-color: rgb[255,0,0]; border-bottom-color: red; border-bottom-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 thin medium thick | border-width: 5px; | Xác định bề dày của đường viền. |
Thuộc tính vị trí | mã màu tên màu Giá trị rgb tên màu Giá trị rgb | border-color: #ff0000; border-color: red; border-color: rgb[255,0,0]; border-left-color: red; border-left-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 thin medium thick | border-width: 5px; | Xác định bề dày của đường viền. |
border-color | mã màu tên màu Giá trị rgb tên màu Giá trị rgb | border-color: #ff0000; border-color: red; border-color: rgb[255,0,0]; 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 thin medium thick | border-width: 5px; | Xác định bề dày của đường viền. |
Thuộc tính vị trí
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 |
border-right: #ff0000 solid 2px; | Xác định đường viền bên phải. | border-bottom | border-right |
border-right: #ff0000 solid 2px; | Xác định đường viền bên phải. | border-bottom | border-right |
border-right: #ff0000 solid 2px; | Xác định đường viền bên phải. | border-bottom | border-right |
border-right: #ff0000 solid 2px; | Xác định đường viền bên phải. | border-bottom | border-right |
border-right: #ff0000 solid 2px; | Xác định đường viền bên phải. | border-bottom | border-right |
border-right: #ff0000 solid 2px; | Xác định đường viền bên phải. | border-bottom | border-right |
border-right: #ff0000 solid 2px; | Xác định đường viền bên phải. | border-bottom | border-right |
border-right: #ff0000 solid 2px; | Xác định đường viền bên phải. | border-bottom | border-right |
border-right: #ff0000 solid 2px; | Xác định đường viền bên phải. | border-bottom | border-right |
border-right: #ff0000 solid 2px; | Xác định đường viền bên phải. | border-bottom | border-right |
border-right: #ff0000 solid 2px;
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ỳ.
HTML viết:
Đây là tag p có border top 2px dạng solid màu đỏ.
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 đỏ.
HTML viết:
Đây là tag p có border right 2px dạng solid màu đỏ.
CSS viết:
p { border-right: 2px solid #ff0000; }
Hiển thị trình duyệt:
Đây là tag p có border top 2px dạng solid màu đỏ.
HTML viết:
Đây là tag p có border bottom 2px dạng solid màu đỏ.
CSS viết:
p { border-bottom: 2px solid #ff0000; }
Hiển thị trình duyệt:
Đây là tag p có border top 2px dạng solid màu đỏ.
HTML viết:
Đây là tag p có border left 2px dạng solid màu đỏ.
CSS viết:
p { border-left: 2px solid #ff0000; }
Hiển thị trình duyệt:
Đây là tag p có border top 2px dạng solid màu đỏ.
HTML viết:
tag { Thuộc tính: width style color; }0
CSS viết:
tag { Thuộc tính: width style color; }1
Hiển thị trình duyệt:
Hiển thị trình duyệt:
Đây là tag p có border top 2px dạng solid màu đỏ.
Đây là tag p có border right 2px dạng solid màu đỏ.
Đây là tag p có border bottom 2px dạng solid màu đỏ.