Thuộc tính CSS border cho phép bạn chỉ định kiểu, chiều rộng và màu sắc của đường viền của một phần tử
1.Các kiểu đường viền trong CSS
Thuộc tính border-style quy định cụ thể các loại đường viền khác nhau tương úng với các giá trị khác nhau. Các giá trị đó là:
- dotted – Xác định một đường viền chấm
- dashed – Xác định đường viền đứt nét
- solid – Xác định một đường viền liền
- double – Xác định đường viền kép
- groove- Xác định đường viền 3D có rãnh . Hiệu ứng phụ thuộc vào giá trị màu của viền
- ridge- Xác định đường viền 3D. Hiệu ứng phụ thuộc vào giá trị màu của viền
- inset- Xác định đường viền in 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
- outset- Xác định đường viền 3D ban đầu. Hiệu ứng phụ thuộc vào giá trị màu viền
- none – Xác định không có đường viền
- hidden – Xác định một đường viền ẩn
Thuộc tính border-style có thể có từ một đến bốn giá trị (bên trên, bên phải, bên dưới, bên trái)
Ví dụ:
2.Thay đổi độ rộng của đường viền
Để thay đổi độ rộng của đường viền ta sử dụng thuộc tính border-width
Độ rộng của đường viền có thể được đặt bằng một kích thước cụ thể (px, pt, cm, em,..v.v.) hoặc một trong ba giá trị định trước:
- thinh (mỏng)
- medium (trung bình)
- thick (dày)
Ví dụ:
Bạn cũng có thể tùy chỉnh độ dày của từng phía của đường viền bằng cách sử dụng bốn giá trị lần lượt ứng với phía trên, bên phải, bên dưới, bên trái
Ví dụ:
3.Thay đổi màu viền
Để thay đổi thuộc tính màu sắc của đường viền ta sử dụng thuộc tính
border-color
Màu của nền có thể được đặt bằng:
- Tên của màu – chỉ định tên của màu, ví dụ: red
- HEX – chỉ định một giá trị HEX, ví dụ: #fff000
- RGB – chỉ định một giá trị RGB, ví dụ: rgb(40,28,95)
- HSL – chỉ định một giá trị HSL, ví dụ: hsl(0,50%,70%)
- transparent – trong suốt
Ví dụ:
Bạn cũng có thể tùy chỉnh màu sắc của từng phía của đường viền bằng cách sử dụng bốn giá trị lần lượt ứng với phía trên, bên phải, bên dưới, bên trái
Ví dụ:
4.Thay đổi các mặt riêng lẻ của đường viền
Để thay đổi các mặt riêng biệt của đường viền ta sử dụng các thuộc tính:
- border-top-style (phía trên)
- border-right-style (phía bên phải)
- border-bottom-style (phía dưới)
- border-left-style (phía bên trái)
Ví dụ:
Ta có thể gộp các thuộc tính phía trên bằng cách sử dụng thuộc tính border-style :
border-style có 2 giá trị: giá trị đầu ứng với phía trên và phía dưới; giá trị thứ 2 ứng với bên trái và bên phải
border-style có 3 giá trị: giá trị đầu ứng với phía trên; giá trị thứ 2 ứng với bên trái và bên phải; giá trị thứ 3 ứng với phía bên dưới
border-style có 4 giá trị: giá trị đầu ứng với phía trên; giá trị thứ 2 ứng với bên phải; giá trị thứ 3 ứng với phía bên dưới; giá trị thứ 4 ứng với bên trái
Ví dụ:
5.Sử dụng gộp nhiều thuộc tính đường viền
Bạn có thể gộp các thuộc tính border-width, border-style, border-color vào một dòng lệnh bằng cách sử dụng thuộc tính border
Ví dụ:
Ở đây, tôi xác định đường viền có độ rộng là 5px, là kiểu nét đơn và có màu đỏ
Bạn cũng có thể chỉ định tất cả các thuộc tính đường viền riêng lẻ chỉ cho một mặt
Ví dụ:
6.Đường viền vát tròn đỉnh trong CSS
Để có được đường viền vát tròn đỉnh ta sử dụng thuộc tính border-radius
Ví dụ:
