[#CSS06] CSS- Border trong CSS

Bài học thứ 6 nằm trong series học CSS. Đây là series giới thiệu về Web Front End Cơ Bản của Trung Tâm Đào Tạo Lập Trình Viên JANETO.

Trong phần bài học này, chúng ta sẽ tiếp tục tìm hiểu về Border trong CSS.

Vậy mục đích của border trong CSS là gì? Border trong CSS giúp chúng ta xác định được những thuộc tính của khung viền như: kiểu, màu sắc, độ rộng hay độ bo cong của viền của một phần tử.

Có những thuộc tính border trong CSS cơ bản thường dùng:

  • border-style (kiểu của viền): thuộc tính này xác định loại đường biên nào được hiển thị. Thuộc tính border-style có thể có từ 1 đến 4 giá trị (đối với đường viền trên, đường viền phải, đường viền dưới cùng và đường viền trái). Một số giá trị được phép: dotted, dashed, solid, double, groove, ridge, insert, outset, none, hidden.
  • border-width (độ rộng của viền): thuộc tính này chỉ định độ rộng của bốn đường viền. Thuộc tính border-width có thể được đặt như một kích thước cụ thể (theo px, pt, cm, em, v.v …) hoặc bằng một trong ba giá trị được xác định trước: mỏng, vừa hoặc dày. Tương tự như border-style, border-width có thể có từ một đến bốn giá trị (đối với đường viền trên cùng, đường viền phải, đường viền dưới cùng và đường viền trái).
  • border-color (màu sắc của viền): thuộc tính này được sử dụng để thiết lập màu sắc của bốn đường viền. Thuộc tính border-color có thể có từ một đến bốn giá trị (đối với đường viền trên cùng, đường viền phải, đường viền dưới cùng và đường viền trái). Nếu màu đường viền không được đặt, nó sẽ kế thừa màu sắc của phần tử. Màu sắc có thể được đặt bằng cách: name – chỉ định tên màu, như “red” hoặc Hex – chỉ định một giá trị hex, như “# ff0000” hoặc RGB – chỉ định giá trị RGB, như “rgb (255,0,0)” hoặc trong suốt.
  • border-radius (độ bo cong của viền): thuộc tính này sử dụng để thêm các đường viền tròn vào một phần tử. Thuộc tính border-radius không được hỗ trợ trong IE8 và các phiên bản trước đó.
  • .v.v.v.

Hy vọng qua bài học hôm nay sẽ giúp cho các bạn một số kiến thức hữu ích nữa để giúp cho các bạn vững chắc hơn trên con đường chinh phục CSS. Cảm ơn các bạn đã theo dõi hẹn gặp các bạn ở bài học tiếp theo trong series học CSS.

Phần trước: [#CSS05] CSS- Background trong CSS

Các bạn hãy đón xem và ủng hộ bằng cách LIKE/SHARE hay SUBCRIBE để có thể cập nhật thông tin mới nhất từ laptrinhvien.io bạn nhé!

 

TRUNG TÂM ĐÀO TẠO LẬP TRÌNH VIÊN JANETO


 0933067997 – 0933267337
 facebook.com/laptrinhvienio
 YouTube/laptrinhvienio
 tuyensinh@laptrinhvien.io
 Tầng 2 Tòa nhà The Morning Star – 57 Quốc Lộ 13, Phường 26, Quận Bình Thạnh, Tp. Hồ Chí Minh.

0

Bình luận

0933 06 7997
0933 26 7337
tuyensinh@laptrinhvien.io