Mục lục

Border trong css

HTML/CSS Frontend - 3228 - Quản trị viên

Thuộc tính border trong css giúp các bạn định dạng độ rộng , kiểu đường viền, màu sắc cho một phần tử.

Thông thường chúng ta sẽ viết như thế này khi tạo đường viền cho một đối tượng:

border: 1px solid red;

Demo:
border : 1px solid red

Chú thích:

1px : Độ rộng cho đường viền.

solid : Kiểu đường viền

red : Màu của đường viền (Có thể thay bằng mã màu #….)

Ngoài ra các bạn có thể tùy chỉnh riêng từng thuộc tính định dạng của border như sau:

Thuộc tính border-width giúp bạn xác định độ rộng cả đường viền.

border-width: 1px;

Thuộc tính border-style giúp bạn xác định xem đường viền nên là solid, dashed, double, …

border-style: solid;

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

border-color: red;

Thuộc tính vị trí của border :

/* Style đường viền bên trên */
        border-top: 1px solid red; 

/* Style đường viền bên dưới*/
        border-bottom: 1px solid red; 

/* Style đường viền bên trái*/
        border-left: 1px solid red; 

/* Style đường viền bên phải*/
        border-right: 1px solid red;

Cũng như bạn muốn thay đổi cả thuộc tính vị trí và thuộc tính định dạng thì như sau:

border-top-color: #ffffff;       /* Đổi màu của đường viền trên */

Tương tự như trên nếu muốn thay đổi độ rộng : width, định dạng: style.

border-top-style : dashed; 
border-top-width : 2px;

Công ty thiết kế website tại hà nội

Các kiểu hiển thị của dạng style trong border:

none.	Xác định thành phần sẽ không có đường viền.	border-style: none
hidden.	Giống như giá trị none, nhưng được dùng cho table.	border-style: hidden
dotted.	Xác định đường viền cho thành phần là dấu chấm (dotted).	border-style: dotted
solid	Xác định đường viền cho thành phần là đường thẳng nét (solid).	border-style: solid
dashed	Xác định đường viền cho thành phần là gạch ngang (dashed).	border-style: dashed
double	Xác định đường viền cho thành phần là 2 đường thẳng nét (double).	border-style: double
groove	Xác định đường viền cho thành phần là đường rãnh (groove).	border-style: groove
ridge	Xác định đường viền cho thành phần là đường chóp (ridge).	border-style: ridge
inset	Xác định đường viền cho thành phần là đường bóng bên trong (inset).	border-style: inset
outset	Xác định đường viền cho thành phần là đường bóng bên ngoài (outset).	border-style: outset
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).	border-style: inherit