1. Trang chủ
  2. Tin tức
  3. Kiến thức về CSS (P4): Thuộc tính border

Kiến thức về CSS (P4): Thuộc tính border

Cấu trúc

C1

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

C2

C3

C6

C7

Kiểu cho border:

8c

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 :

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:

1234

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 :

12345

12345A

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 ridge

1 border: 20px groove #e3e3e3;

21

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é.