CSS 12 – Thuộc tính đường viền Border trong CSS

0
248
Xin chào các bạn, bài số 12 trong series học lập trình CSS, chúng ta sẽ tìm hiểu về thuộc tính tạo đường viền trong CSS là Border.
đường viền border trong css

Đường viền Border trong CSS

Để thêm đường viền cho phần tử, các bạn cần sử dụng thuộc tính Border với các tham số giá trị như:
  • border-width: kích cỡ của đường viền
  • border-style: kiểu cách của đường viền, như nét đứt, nét liền, chấm, …
  • border-color: màu sắc hiển thị của đường viền

Thuộc tính border

Cả 3 tham số border-width, border-style, border-color ở trên có thể được viết trên 1 dòng CSS với thuộc tính border. Cú pháp: Ví dụ:
Ở ví dụ đoạn code CSS border: 5px solid red; đã chỉ ra đường viện có độ rộng 5px, kiểu đường liền, màu đường viền là đỏ.

Thuộc tính border-width, border-color, border-style

Ngoài cách viết đường viền theo thuộc tính border như trên, thì còn có thể sử dụng 3 thuộc tính border-width, border-style, border-color để chỉ ra cụ thể kích cỡ, kiểu đường và màu sắc hiển thị của đường viền. Độ rộng border-width có giá trị theo đơn vị như px, pt, em ,… Màu sắc border-color có giá trị màu theo quy tắc CSS như tên màu tiếng Anh, màu hex, màu RGB, rgba, … Kiểu của đường viền border-style nhận các giá trị như:
  • none: không có khung viền
  • solid: kiểu nét liền
  • dotted: kiểu chấm đứt
  • dashed: kiểu gạch đứt
  • double: viền kép
  • groove: đường viền 3D. Xác định đường viền cho thành phần là đường rãnh.
  • ridge: đường viền 3D. Xác định đường viền cho thành phần là đường chóp.
  • inset: đường viền 3D. Xác định đường viền cho thành phần là đường bóng bên trong.
  • outset: đường viền 3D. Xác định đường viền cho thành phần là đường bóng bên ngoài.
  • hidden: ẩn kẻ khung (khung không kẻ nhưng độ rộng phần tử vẫn có khung).
Ví dụ:

Đường viền theo từng cạnh

Các cách viết ở trên tác động lên cả 4 cạnh của khối, nếu muốn thiết lập cho từng cạnh của khối thì bạn có thể sử dụng thêm các thuộc tính cho từng cạnh, đó là:
  • border-top
  • border-right
  • border-bottom
  • border-left
Ví dụ: Kẻ đường viền chấm đứt phía dưới
Tương tự như border-width, border-style và border-color, bạn cũng có thể định nghĩa từng tham số như vậy 1 cách riêng biệt cho từng cạnh trên, phải, dưới hoặc trái. Như sau:
  • border-left-width
  • border-left-style
  • border-left-color
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color

Chú ý

Nếu bạn không thiết lập đầy đủ các thuộc tính color, width, size cho đường viền hoặc bỏ trống 1 thuộc tính nào đó, thì mặc định sẽ là:
  • Màu đường viền là màu đen
  • Độ rộng đường viền là không có
  • Kích cỡ đường viền là không có
Thuộc tính border-color không được sử dụng một mình. Nó luôn luôn được sử dụng với các thuộc tính border khác như thuộc tính “border-style” để thiết lập đường viền trước, nếu không nó sẽ không hoạt động. Thuộc tính border-width không được sử dụng một mình. Nó luôn luôn được sử dụng với các thuộc tính border khác như thuộc tính “border-style” để thiết lập đường viền trước, nếu không nó sẽ không hoạt động.

Kết luận

Như vậy tôi đã giúp các bạn tìm hiểu xong thuộc tính tạo đường viền trong CSS đó là border. Border là vấn đề sử dụng rất nhiều trên website nên các bạn cố gắng nhớ đầy đủ các cách sử dụng của nó nhé. Chúc các bạn học tập tốt!  

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây