[Học CSS] Bài 10: Làm việc với khung viền – border trong CSS

Trong bài này chúng ta cùng tìm hiểu về  khung viền – border trong CSS, để xem hình thù nó ra sao và sử dụng như thế nào nhé !

Hình dung về border trong CSS

Để hình dung các bạn xem hình ảnh minh họa sau, đó là border (khung viền) mà mình sử dụng trên Hocban.vn

Vi du ve border

Trong ví dụ này thì khung viền (border) ở đây nó bao quanh đối tượng là link của “bài viết liên quan”. Và thứ hai nó là một đường viền ngăn cách “nét đứt” giữa phần bài viết liên quan và phần bình luận.

Sử dụng border trong CSS

Để sử dụng border trong CSS thì các bạn cho vùng chọn đoạn CSS về Border như sau:

Trong đoạn code trên thì các giá trị của border được hiểu như sau:

  • Solid: là kiểu border, ở đây là kiểu đường viền liền khối. Ngoài ra nó còn có các giá trị khác như: dotted (đường viền tạo bởi các dấu chấm), dashed (dấu gạch ngang), double (02 đường viền song song).
  • 1px : đây là độ dày của đường viền, giá trị 1px, 2px,…20px,.. gì đó tùy nhu cầu nhé !
  • blue: màu sắc của đường viền, đây là màu xanh dương, ngoài việc sử dụng các tên màu bạn cũng có thể sử dụng mã màu CSS cho nó.

Bây giờ các bạn xem qua ví dụ, nhớ dán vào công cụ Codepen để xem kết quả, sau đó thay thế các giá trị trong đoạn border solid blue 5px bằng các giá trị mà mình đã đưa ra ở trên.

Boder là một cái khung viền, nó có thể bao quanh vùng chọn, cũng có thể nó chỉ bao ở một phía của vùng chọn như:

  • Border-top: Đường viền đặt phía trên vùng chọn;
  • Border-bottom: Đường viền đặt phía dưới vùng chọn;
  • Border-left: Đường viền đặt bên trái vùng chọn;
  • Border-right: Đường viền đặt bên phải vùng chọn.

Nếu bạn để nguyên border thì mặc định là nó sẽ bao quanh vùng chọn bằng một cái khung, còn nếu bạn chỉ muốn bao quanh phần bên trái, bên phải, 2 bên, 3 bên, 1 bên cũng được thì sử dụng cú pháp tương tự như:

Các bạn copy và thay thế đoạn code này bằng đoạn  border: solid blue 3px; trong ví dụ trên để xem nó hiển thị như thế nào nhé ! Thôi mình dán luôn cho rồi :v

Cũng ổn đó chứ nhỉ, cứ thế mà nghịch thôi. Thay thế tất cả những giá trị trong ví dụ bằng các giá trị mà bạn muốn. Ví dụ bạn chỉ muốn border nằm ở bên trái của nội dung, có màu đỏ và nét đậm liền khối, độ dày đường viền là 3px chẳng hạn thì làm sao ? Haha, thôi tự tìm hiểu nhé !

Nhưng mà sau khi xem xong ví dụ, các bạn để ý là phần nội dung quá sát với đường viền đúng không nào ? Và để giải quyết vấn đề này thì trong những bài tiếp theo chúng ta sẽ cho vị trí của khung viền cách xa phần nội dung với một khoảng cách nhất định.

Bài học trước đó và tiếp theo


- TÁC GIẢ BÀI VIẾT -

Hocban.vn

Farmer at Home Garden
Bài viết bạn vừa xem được thực hiện bởi biên tập viên của Hocban.vn - chúc các bạn online vui vẻ và góp nhặt được nhiều thông tin, tư liệu hữu ích. Trân trọng !

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )