Hướng dẫn toàn diện về thuộc tính Border trong CSS từ A-Z

Trong thiết kế giao diện web, việc tạo điểm nhấn và phân chia bố cục giữa các thành phần là vô cùng quan trọng. Thuộc tính border css giúp bạn dễ dàng tùy chỉnh độ rộng, kiểu đường viền và màu sắc cho bất kỳ phần tử HTML nào trên trang. Thay vì chỉ sử dụng các khối màu đơn điệu, bạn hoàn toàn có thể định dạng từng cạnh riêng biệt hoặc kết hợp nhiều hiệu ứng viền khác nhau để website trở nên chuyên nghiệp và sinh động hơn. Dưới đây là hướng dẫn chi tiết cách dùng border trong CSS từ cú pháp viết tắt đến thiết lập chuyên sâu.

Cú Pháp Sử Dụng Border Css Thông Thường Dễ Hiểu Nhấ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