Kiến Thức Về CSS (P4): Thuộc Tính Border - Webico Blog

Trong CSS, có những thuộc tính chung cơ bản mà người làm web ai cũng phải biết, đối với các bạn đang tự học thiết kế web đây là kiến thức hữu ích. Trong bài hôm nay chúng ta sẽ tìm hiểu thuộc tính border trong CSS.

Thuộc tính border là gì?

Thuộc tính border trong CSS được sử dụng để thiết lập tất cả các Style liên quan tới đường viền của một phần tử. Chẳng hạn như màu, độ rộng, style của đường viền. Nói một cách dễ hình dung thuộc tính border là thuộc tính để tạo đường viền.

Thuộc tính border được chia ra làm 2 loại là thuộc tính định dạng và thuộc tính vị trí:

Thuộc tính định dạng

• border-color: màu cho đường viền
• border-style: kiểu cho đường viền
• border-width: độ rộng cho đường viền

Thuộc tính vị trí

• border-top: đường viền hiển thị bên trên
• border-right: đường viền hiển thị bên phải
• border-bottom: đường viền hiển thị bên dưới
• border-left: đường viền hiển thị bên trái
• border: đường viền hiển thị bao quanh thành phần

Cấu trúc

Với thuộc tính và giá trị như sau:

Kiểu cho border:

Những điều không nên bỏ qua về CSS border:

Để chỉnh độ dày mỏng của đường viền các bạn có thể sử dụng Đoạn css trên sẽ cho chúng ta một đường viền (border) với kích thước là 1px, ngoài ra các bạn còn có thể tùy chỉnh độ dày mỏng của đường viền như sau :

Xem thêm: Website là gì? Để một website hoạt động cần có những gì?

1 2 3

border-width: thick; border-style: solid; border-color: black;

Bằng cách chỉ định giá trị border-width , chúng ta sẽ có những đường viền với độ dày mỏng khác nhau như bên dưới:

Border-Radius

border-radius  là một cải tiến có trong CSS3, với thuộc tính này, chúng ta sẽ dễ dàng bo tròn đường viền góc của đối tượng . Để có thể chạy tốt trên mọi trình duyệt, các bạn cần phải khai báo đầy đủ như sau :

1 2 3

-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

ví dụ mà border-radius có thể làm được với những giá trị khác nhau :

Border-Style

Trong khi các giá trị solid, dashed, dotted thường được sử dụng nhất thì thuộc tính border-style còn cung cấp các giá trị như là groove vàridge

1	border: 20px groove #e3e3e3;

Xem thêm:

• Kiến thức về CSS (P1): Giới thiệu về CSS
• Kiến thức về CSS (P2): Cách viết nội dung, bộ chọn và comment trong CSS
• Kiến thức về CSS (P3): Các thuộc tính background trong CSS.

Chúc các bạn tự học thiết kế web thật hiệu quả. Nhớ theo dõi tiếp các bài viết hữu ích về kiến thức CSS ở các bài viết sau nhé.