HTML/CSS News

[W3schools Tiếng Việt] – CSS Borders | Đường viền

Viết bởi Tiến Đức
Phần 6 của 9 trong series [W3schools Tiếng Việt] - CSS

Thuộc tính của đường viền phần tử

Các thuộc tính CSS border cho phép bạn chỉ định kiểu dáng, chiều rộng và màu sắc của đường viền của một phần tử.

Thuộc tính border dùng để định dạng đường viền cho phần tử HTML.

Các kiểu đường viền

Thuộc border-style chỉ định loại đường viền sẽ hiển thị.

  • dotted – Xác định đường viền chấm
  • dashed – Xác định đường viền nét đứt
  • solid – Xác định đường viền liền vạch
  • double – Xác định đường viền đôi
  • groove – Xác định đường viền có rãnh 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • ridge – Xác định đường viền có viền gợn sóng 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • inset – Xác định đường viền có hình nhỏ viền 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • outset – Xác định đường viền đầu 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • none – Xác định kông viền
  • hidden – Ẩn viền

See the Pen Borders by nguyen tien (@nguyentien365) on CodePen.

Lưu ý: Đường viền của phần tử chỉ hiện lên khi nó đã được thiết lập kiểu đường viền.


Thiết lập độ dày của đường viền

Thuộc tính border-width chỉ định chiều rộng của bốn đường viền xung quanh

Chiều rộng có thể được đặt thành một kích thước cụ thể (tính bằng px, pt, cm, em, v.v.) hoặc bằng cách sử dụng một trong ba giá trị được xác định trước: thin, medium, or thick (mỏng, trung bình hoặc dày).

Thuộc tính border-widthcó thể có từ một đến bốn giá trị (đối với viền trên, viền phải, viền dưới và viền trái).

See the Pen The border-width Property by nguyen tien (@nguyentien365) on CodePen.


Mầu của đường viền

Cú pháp

Thuộc tính border-color được sử dụng để đặt màu của đường viền xung quanh. Có thể có từ một đến bốn giá trị (đối với viền trên, viền phải, viền dưới và viền trái).

Khi viết gọn lại thì thứ tự mầu sẽ được tô vào các cạnh như sau: 

theo chiều kim đồng hồ, dễ nhớ phải không nào :))

Màu sắc có thể được thiết lập bởi:

  • Tên mầu – chỉ định tên màu, như “red”
  • Hex – chỉ định giá trị hex, như “# ff0000”
  • RGB – chỉ định giá trị RGB, như “rgb (255,0,0)”
  • trong suốt

(Tham khảo thêm hơn 140 tên mã mầu tại đây nhé)

Nếu màu đường viền không được đặt, nó sẽ kế thừa màu của phần tử.

See the Pen Mầu của đường viền by nguyen tien (@nguyentien365) on CodePen.

Lưu ý: Thuộc tính “border-color” không hoạt động nếu nó được sử dụng một mình, tức là phần tử đó chưa có đường viền. Sử dụng thuộc tính “border-style” để đặt đường viền trước.


Dạng viền tùy chỉnh

Trong CSS, cũng có các thuộc tính để chỉ định hình dạng của từng đường viền (trên, phải, dưới và trái):

See the Pen viền tùy chỉnh by nguyen tien (@nguyentien365) on CodePen.

Tuy nhiên bạn có thể viết gọn các thuộc tính theo thứ tự:

Nhưng đôi khi bạn có thể thấy sự xuất hiện của chỉ 2 hoặc 3 giá trị thì mầu sẽ được quy định như sau:

Lưu ý thêm lần nữa nhé: quy tắc viết gọn trên áp cho cả border-width và border-color.


Sử dụng tốc ký – Cách kết hợp các thuộc tính Border

Như các bạn thấy, có mỗi cái đường viền thôi nhưng nó có nhiều thuộc tính, để rút gọn những đoạn code thì bạn cần sử dụng theo quy tắc, Thuộc tính border  là thuộc tính tốc ký cho các thuộc tính viền riêng lẻ sau:

  • border-width
  • border-style (bắt buộc)
  • border-color
trong đó:

5px là border-width

solid là border-style

red là border-color

Kết quả

Hoặc bạn có thể chỉ định thuộc tính cho 1 cạnh nhất định:


Bo góc cho viền – Rounded Borders

Thuộc tính border-radius được sử dụng để thêm viền tròn cho một phần tử:

Normal border

Round border

Rounder border

Roundest border

Bonus: Giới thiệu đến bạn một số đường viền trang trí sẵn làm đẹp cho website, blog của bạn. Xem tại đây nhé.

Xem thêm bài trong series<< [W3schools Tiếng Việt] – CSS Backgrounds[W3schools Tiếng Việt] – CSS TEXT | Định dạng văn bản >>
Sending
User Review
0 (0 votes)

Về tác giả

Tiến Đức

1 bình luận

Gửi phản hồi

%d bloggers like this: