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

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

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:

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

  • Người viết đánh giá

  • Rated 5 stars
  • 100%

  • Reviewed by:
  • Published on:
  • Last modified: 13/07/2016

Giới thiệu

WEBICO là công ty thiết kế website theo hướng chuyên nghiệp và hiện đại, tiên phong trong việc áp dụng các công nghệ hàng đầu trên thế giới hiện nay như HTLM5, CS3, PHP, Bootstrap,...Ngoài ra, WEBICO còn cung cấp thêm các giải pháp cũng như dịch vụ chuyên về Internet Marketing.

Báo giá dịch vụ

Liên hệ với chúng tôi để nhận báo giá dịch vụ cho dự án của bạn với chi phí tốt nhất.