Khi sử dụng đường viền CSS, bạn có thể chỉ định các loại đường viền cho các phần tử của mình bằng cách sử dụng kiểu đường viền, màu đường viền, độ rộng đường viền, hình ảnh đường viền và bán kính đường viền
Ví dụ về đường viền CSS
Bán kính đường viền CSS. Điều này có một đường viền chấm với thuộc tính bán kính
đường viền rắn. Hình này có đường viền liền màu đen ở tất cả các bên với chiều rộng đường viền là 3px. Điều này có nghĩa là kích thước đường viền là 3px
Đường viền CSS dưới cùng. Điều này chỉ có một đường viền ở phía dưới
Màu viền CSS. Phần tử có viền màu xanh lam
CSS độ dài đường viền - thậm chí bạn có thể kiểm soát độ dài của đường viền thông qua CSS
Cú pháp Đường viền CSS được sử dụng nhiều nhất.
đường viền . chiều rộng đường viền kiểu đường viền border-color;
Đây là cú pháp tốc ký của đường viền CSS và có một cú pháp khác cho đường viền CSS mà bạn sẽ thấy trên trang web này. Thuộc tính Kiểu đường viền là bắt buộc và không thể xóa.
Có một cách để thiết lập thuộc tính đường viền CSS cho các cạnh riêng lẻ của đường viền
Cú pháp của CSS-Border-side.
đường viền trên cùng . đường viền trên cùng kiểu trên cùng của đường viền border-top-color;
here, border-top-style is mandatory
đường viền bên phải . đường viền bên phải chiều rộng kiểu bên phải đường viền border-right-color;
here, border-right-style is mandatory
đường viền đáy . đường viền-đáy-rộng kiểu đường viền dưới đáy border-bottom-color;
here, border-bottom-style is mandatory
đường viền bên trái . đường viền bên trái kiểu đường viền bên trái border-left-color;
here, border-left-style is mandatory
Lưu ý/Thông tin
Điều cực kỳ quan trọng cần lưu ý là kiểu đường viền là bắt buộc để xác định đường viền CSS và không thể bỏ qua kiểu đường viền này, vì vậy bạn PHẢI đặt kiểu đường viền cho tất cả các định nghĩa đường viền. × Bỏ qua cảnh báo
Chiều rộng đường viền CSS
Thuộc tính CSS độ rộng đường viền được dùng để đặt độ rộng của đường viền
chiều rộng đường viền là cách viết tắt của đường viền trên cùng, chiều rộng đường viền bên phải, chiều rộng đường viền dưới cùng và chiều rộng đường viền bên trái
Ở đó, chiều rộng đường viền có thể lấy bất kỳ giá trị nào dưới đây
- chiều dài hợp lệ - giá trị chiều dài hợp lệ của chiều rộng đường viền
- trung bình – chiều rộng trung bình của đường viền
- mỏng – chiều rộng mỏng của đường viền
- dày – độ dày của đường viền
- kế thừa – Lấy chiều rộng từ đường viền gốc
- không có – xóa bất kỳ đường viền nào
Ví dụ để sử dụng thuộc tính độ rộng đường viền tốc ký
#solid-border { border-style:solid; border-width:3px; }
Chạy mã
Ví dụ hiển thị độ rộng đường viền với 3 giá trị
#border-3-width { border-style:dashed; border-width:2px 5px 12px; padding:20px; }
Chạy mã
Vì vậy, bạn có thể đặt chiều rộng cho cả 4 đường viền cùng lúc bằng cách sử dụng CSS order-width hoặc bạn cũng có thể đặt
- Đối với chiều rộng của đường viền trên cùng –border-top-width.
- Chiều rộng của đường viền bên phải – border-right-width
- Và chiều rộng của đường viền dưới – border-bottom-width
- Độ rộng của đường viền bên trái – Thuộc tính là border-left-width
Bạn có thể xác định chiều rộng bằng cm, px, pt, em, inch, mỏng, dày, trung bình, v.v. Đây là những cách để đặt đường viền theo giá trị số hoặc theo giá trị được đặt tên
Ví dụ để đặt đường viền cho các mặt cụ thể
#specbdr { border-style:solid; border-bottom-width:4px; border-left-width:12px; padding:20px; }
Chạy mã
Kiểu viền CSS
a] thuộc tính border-style được sử dụng để đặt thiết kế của đường viền. Nó được sử dụng để đặt một kiểu xuất hiện cụ thể cho đường viền của bạn
kiểu đường viền là viết tắt của kiểu đường viền trên cùng, kiểu đường viền bên phải, kiểu đường viền dưới cùng và kiểu đường viền bên trái
b] Vì vậy, bạn có thể đặt kiểu cho cả 4 đường viền cùng lúc bằng cách sử dụng kiểu đường viền hoặc bạn cũng có thể đặt kiểu riêng cho từng đường viền bằng cách sử dụng một tập hợp con thuộc tính kiểu đường viền như –
- Kiểu của đường viền trên cùng – Thuộc tính là kiểu viền trên cùng
- Và style của đường viền bên phải – Thuộc tính là border-right-style
- Đây là style của bottom border – Thuộc tính là border-bottom-style
- Đối với kiểu viền trái – Thuộc tính là border-left-style
Có nhiều thiết kế đường viền và bạn có thể xác định kiểu đường viền như bất kỳ kiểu nào bên dưới
- chất rắn
- tiêu tan
- say mê
- gấp đôi
- có gờ
- rãnh
- chèn vào
- khởi đầu
- đề cương
- ẩn giấu
- không ai
Ví dụ hiển thị tất cả các kiểu đường viền
.sb { border-width:3px; border-style: solid; border-color: black; } .gb { border-width:2px; border-style: groove; border-color: yellow; } .rb { border-width:5px; border-style: ridge; border-color: brown; } .dbb { border-width:2px; border-style: double; border-color: tomato; } .dsb { border-width:6px; border-style: dashed; border-color: green; } .dtb { border-width:7px; border-style: dotted; border-color: blue; } .inb { border-width:10px; border-style: inset; border-color: grey; } .otb { border-width:8px; border-style: outset; border-color: red; }
Chạy mã
Ví dụ sử dụng thuộc tính kiểu đường viền tốc ký
#groove { border-style:groove; border-width:4px; }
Chạy mã
Lưu ý/Thông tin
1. Nếu kiểu viền có 1 giá trị.
Ví dụ .
kiểu đường viền. chắc chắn;
sau đó, kiểu đường viền trên, phải, dưới và trái là cố định
2. Nếu kiểu viền có 2 giá trị.
Ví dụ .
kiểu đường viền. nét đứt đôi;
thì kiểu viền trên dưới là nét đứt, còn kiểu viền phải trái là nét đôi.
3. Nếu kiểu viền có 3 giá trị.
Ví dụ .
kiểu đường viền. liền nét đứt-chấm;
sau đó, kiểu viền trên là nét liền, kiểu viền phải và trái là nét đứt và kiểu viền dưới là chấm
4. Nếu kiểu viền có 4 giá trị.
Ví dụ .
kiểu đường viền. hình nhỏ ẩn có gờ kép ;
sau đó, kiểu của đường viền trên cùng là gấp đôi, kiểu của đường viền bên phải là đường viền, kiểu của đường viền dưới cùng là không có và kiểu của đường viền bên trái được lồng vào
Ví dụ hiển thị kiểu đường viền với 2 giá trị
#border-2-style { border-width:2px; border-style:dashed groove; padding:20px; }
Chạy mã
Ví dụ hiển thị kiểu đường viền của các mặt khác nhau
p.specbdrstyle { border-width:4px; border-top-style:solid; border-right-style:dashed; padding:20px; }
Chạy mã
Màu viền CSS
Khi sử dụng thuộc tính màu đường viền CSS, bạn có thể đặt màu đường viền bằng cách sử dụng giá trị màu.
a] thuộc tính màu viền được sử dụng để đặt màu của đường viền.
màu viền là cách viết tắt của màu viền trên, màu viền bên phải, màu viền dưới đáy và màu viền trái
b] Vì vậy, bạn có thể đặt màu cho cả 4 đường viền cùng lúc bằng cách sử dụng thuộc tính màu đường viền hoặc bạn cũng có thể đặt màu riêng cho từng đường viền bằng cách sử dụng một tập hợp con thuộc tính màu đường viền như –
- Màu của đường viền trên cùng – Thuộc tính là border-top-color
- Và Color of the right border – Thuộc tính là border-right-color
- Ở đây là Color of the bottom border – Thuộc tính là border-bottom-color
- Màu của viền trái – Thuộc tính là border-left-color
Có 6 cách để đặt giá trị màu. tên màu, giá trị RGB, mã thập lục phân, giá trị RGBA, giá trị HSL và giá trị hsla
Ví dụ sử dụng thuộc tính màu viền tốc ký
.styleval4 { border-width: 2px; border-style: solid; border-color: tomato; }
Chạy mã
Màu đường viền CSS cho các mặt cụ thể
Có 4 mặt giáp i. e. bên trái đường viền, đường viền trên cùng, đường viền bên phải và đường viền dưới cùng
Bạn cũng có thể đặt các màu khác nhau cho các đường viền cụ thể bằng cách sử dụng thuộc tính border-left-color, border-top-color, border-right-color và border-bottom-color
Lưu ý/Thông tin
1. Nếu màu viền có 1 giá trị.
Ví dụ .
màu viền. màu đỏ;
sau đó, màu của viền trên, phải, dưới và trái là Đỏ
2. Nếu màu viền có 2 giá trị.
Ví dụ .
màu viền. xanh đỏ;
sau đó, màu của viền trên và dưới là màu đỏ, trong khi màu của viền phải và trái là xanh lam
3. Nếu màu viền có 3 giá trị.
Ví dụ .
màu viền. màu vàng #008000 bột màu xanh da trời;
sau đó, màu của đường viền trên cùng là màu vàng, màu của đường viền bên phải và bên trái là #008000 [giá trị hex cho màu xanh lá cây] và màu của đường viền dưới cùng là màu xanh lam
4. Nếu màu viền có 4 giá trị.
Ví dụ .
màu viền. hồng cà chua tím đen;
sau đó, màu của đường viền trên là màu hồng, màu của đường viền bên phải là màu đen, màu của đường viền dưới là màu tím và màu của đường viền bên trái là màu cà chua
Ví dụ hiển thị màu viền với 2 giá trị
________số 8
Chạy mã
Theo dõi @tutorial_brain
Ví dụ về các đường viền màu khác nhau cho các mặt khác nhau
#div2 { background-color:powderblue; border-width:4px; padding:5px; border-left-style: solid; border-left-color: red; border-top-style: Double; border-top-color: blue; border-right-style: Dotted; border-right-color: rgb[255,255,0]; border-bottom-style: Groove; border-bottom-color: green; }
Chạy mã
Cảnh báo/Lưu ý/Thông tin
Điều quan trọng là phải luôn đặt thuộc tính kiểu đường viền trước thuộc tính màu đường viền. × Bỏ qua cảnh báo
Theo dõi @tutorial_brain
Bán kính đường viền CSS
Nếu bạn muốn đặt các đường viền tròn, thì bạn nên sử dụng thuộc tính bán kính đường viền của CSS
Thuộc tính bán kính đường viền được thảo luận chi tiết tại trang CSS viền tròn
Ví dụ làm tròn đường viền
#border-3-width { border-style:dashed; border-width:2px 5px 12px; padding:20px; }0
Chạy mã
Hình ảnh đường viền CSS
Trên thực tế, chúng ta cũng có thể đặt hình ảnh trong đường viền bằng cách sử dụng thuộc tính border-image của CSS
Hình ảnh đường viền CSS sẽ được thảo luận chi tiết tại Trang Hình ảnh đường viền CSS.
Ví dụ về hình ảnh đường viền
#border-3-width { border-style:dashed; border-width:2px 5px 12px; padding:20px; }1
Chạy mã
Bóng viền CSS
Bạn cũng có thể đặt bóng cho đường viền bằng thuộc tính box-shadow của CSS
CSS Border Shadow sẽ được thảo luận chi tiết tại Trang CSS Border Shadow.
Câu hỏi và trả lời phỏng vấn CSS
1. Làm cách nào để đặt đường viền trong CSS?
Sử dụng thuộc tính đường viền để tạo đường viền bao quanh các thành phần trong CSS.
Cú pháp.
#border-3-width { border-style:dashed; border-width:2px 5px 12px; padding:20px; }2
- Làm cách nào để đặt viền màu xung quanh văn bản trong CSS?
Để tạo đường viền màu xung quanh văn bản, chúng ta cần cung cấp thuộc tính đường viền và chỉ định màu.
Ví dụ: nếu bạn muốn tạo đường viền xung quanh đoạn văn, hãy nhập mã bên dưới.
#border-3-width { border-style:dashed; border-width:2px 5px 12px; padding:20px; }3
- Thuộc tính nào xác định chiều rộng của đường viền?
Thuộc tính độ rộng đường viền CSS chỉ định độ rộng của đường viền
#border-3-width { border-style:dashed; border-width:2px 5px 12px; padding:20px; }4
4. Thuộc tính nào được sử dụng để thiết lập đường viền rắn?
Sử dụng thuộc tính kiểu đường viền CSS, chúng ta có thể đặt đường viền cố định
Chúng ta có thể định nghĩa kiểu viền là
#border-3-width { border-style:dashed; border-width:2px 5px 12px; padding:20px; }5
- Làm cách nào để thay đổi màu đường viền ở mỗi bên trong CSS?
Chúng ta có thể sử dụng thuộc tính màu viền để thay đổi màu đường viền ở mỗi bên như trên, phải, dưới và trái