Border trong css

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:

Hiện nay thuộc tính border còn được cải tiến thêm nhiều ở trong css3. Nổi bật là border-radius. Ở bài sau mình sẽ giới thiệu về nó.

Chúc các bạn thành công !

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