Đường Viền Trong CSS (CSS Border) - Lập Trình Từ Đầu

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ụ: