Ví Dụ Về Thuộc Tính Border - Học Web Chuẩn

Có thể bạn quan tâm

Ví dụ về thuộc tính border

Thuộc tính border-color : xác định màu sắc của đường viền.

<html> <head> <style type="text/css"> p { border: solid; border-color: red; } </style> </head> <body> <p>border-color</p> </body> </html>

border-color

Thuộc tính border-style : xác định hình dạng của đường viền.

<html> <head> <style type="text/css"> p { border-style: dotted; } </style> </head> <body> <p>border-style</p> </body> </html>

border-style

Các loại hình dạng cho border:

Ví dụ	Mô tả	Hiển thị
border-style: none;	Xác định thành phần sẽ không có đường viền.	Đường viền hiển thị
border-style: hidden;	Giống như giá trị none, nhưng được dùng cho table.	Đường viền hiển thị
border-style: dotted;	Xác định đường viền cho thành phần là dấu chấm (dotted).	Đường viền hiển thị
border-style: dashed;	Xác định đường viền cho thành phần là gạch ngang (dashed).	Đường viền hiển thị
border-style: 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ị
border-style: 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ị
border-style: groove;	Xác định đường viền cho thành phần là đường rãnh (groove).	Đường viền hiển thị
border-style: ridge;	Xác định đường viền cho thành phần là đường chóp (ridge).	Đường viền hiển thị
border-style: 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ị
border-style: 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ị
border-style: 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ị

Thuộc tính border-width : xác định bề dày của đường viền.

<html> <head> <style type="text/css"> p { border: solid; border-width: 5px; } </style> </head> <body> <p>border-width</p> </body> </html>

border-width