Lưu ý. Khi đặt thuộc tính cho đường viền là không có hoặc ẩn thì người xem đều không nhìn thấy đường viền. Nhưng không là không có, còn ẩn là vẫn có đường viền nên vẫn chiếm diện tích, độ dày càng lớn thì khoảng trống càng lớn Show
 Các thuộc tính cơ bản về border css Cách khai báo định dạng đường viền css kiểu tốc kýThay vì phải khai báo từng thuộc tính một dòng, bạn có thể viết rút gọn lại cú pháp. biên giới. giá trị1 giá trị2 giá trị3; Ví dụ. biên giới. rắn #009999 8px; Định dạng đường viền css theo từng cạnhTrong thực tế không phải lúc nào cũng định dạng 4 đường viền như nhau mà chúng ta có thể định dạng mỗi đường viền theo một kiểu, tương ứng với các vị trí. Trên cùng (trên); 1. Cách mạng báo cơ bảnChúng ta sẽ khai báo theo vị trí của từng phụ cận. Cú pháp là. ranh giới-vị trí-thuộc tính. value; Ví dụ 2. Cách viết tắt kiểu báo cáo (viết tắt)Cú pháp 1. kiểu viền. giá trị1 giá trị2 giá trị3 giá trị4; – Ví dụ <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double dashed; } </style> </head> <body> <p> - Đường viền phía trên có kiểu là dotted<br> - Đường viền bên phải có kiểu là solid<br> - Đường viền phía dưới có kiểu là double<br> - Đường viền bên trái có kiểu là dashed </p> </body> </html> Cú pháp 2. kiểu viền. giá trị1 giá trị2 giá trị3; <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html> Cú pháp 3. kiểu viền. giá trị1 giá trị2; <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html> Định dạng đường viền css theo từng cạnh Thuộc tính bán kính biên giớiThuộc tính bán kính đường viền được bổ sung vào CSS 3, bán kính có nghĩa là bán kính. Thuộc tính này có tác dụng bẻ cong 4 góc của đường bao – Cú pháp 1. bán kính đường viền. giá trị1 giá trị2 giá trị3 giá trị4; . trái trên, phải trên, trái dưới, phải dưới – Cú pháp 2. bán kính đường viền. value1 value2 value3;Tương ứng với các góc. trái trên, phải trên + phải dưới, trái dưới – Cú pháp 3. bán kính đường viền. value1 value2;Tương ứng với các góc. 2 góc bên trên, 2 góc bên dưới – Cú pháp 4. bán kính đường viền. giá trị; Ví dụ 1. bán kính đường viền. 10px 20px 30px 40px; Kết quả. các góc đã bị bẻ cong Ví dụ 2. mình sẽ cho chiều rộng, chiều dài và chỉ số bán kính đường viền bằng nhau <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html> Kết quả. trở thành 1 hình tròn Đường viền CSS hay đường viền thuộc tính trong CSS được sử dụng để thiết lập đường viền trên một phần tử Thuộc tính đường viền trong CSS được sử dụng để chỉ định kiểu cách, màu sắc và kích thước đường viền của một phần tử. Thuộc tính đường viền CSS được đưa ra dưới đây
A number of border css1) Kiểu viền CSSThuộc tính border-style được sử dụng để chỉ kiểu đường biên mà bạn muốn hiển thị trên trang web Giá trị của thuộc tính kiểu đường viền được liệt kê trong bảng sau Giá trịMô phân biệt Nó chỉ được định nghĩa là không có bất kỳ đường viền nào được định nghĩa. dotted Nó được sử dụng để xác định một đường viền là các dấu chấm (chấm). nét đứt Nó được sử dụng để xác định đường viền nét đứt. solid Nó được sử dụng để xác định một đường viền solid. double Định nghĩa hai đường bao với giá trị chiều rộng đường bao giống nhau. rãnh Nó định nghĩa một rãnh đường viền 3D. Hiệu ứng được tạo ra theo giá trị viền màu. ridge Nó định nghĩa một đường viền 3D ridge. Hiệu ứng được tạo ra theo giá trị viền màu. inset Nó định nghĩa một inset 3D đường viền. Hiệu ứng được tạo ra theo giá trị viền màu. ban đầu Nó định nghĩa một đường viền 3D ban đầu. Hiệu ứng được tạo ra theo giá trị viền màu. hiddenIts đường viền xác định không được hiển thịVí dụ về thuộc tính border-style trong CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>91 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>92 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>93 ________ 194 ________ 195 ________ 196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>1 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>4 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>5 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>7 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>0____196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____23 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____25 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____27 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____29 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>1 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____33 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____35 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____37 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>9 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____1911 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>0____196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>1____196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>919 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>926 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>927 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>935 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>936 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>944 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>945 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>953______1954 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>962 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>963 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>01______102 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>10 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>11 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>19____120 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>28 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>29 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>37 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>38 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>919 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>95 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 2) Màu đường viền CSSThuộc tính màu viền được sử dụng để thiết lập màu của đường viền. Có ba phương pháp để thiết lập màu sắc của đường viền như sau
Ngoài ra còn có một đường viền màu có tên “trong suốt”. Nếu đường viền màu không được thiết lập thì nó được kế thừa từ thuộc tính màu của phần tử Lưu ý. Thuộc tính màu viền không được sử dụng bởi một mình. Nó luôn luôn được sử dụng với các thuộc tính đường viền khác nhau như thuộc tính “kiểu đường viền” để thiết lập đường viền trước, nếu không nó sẽ không hoạt động Ví dụ về thuộc tính border-color trong CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>91 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>92 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>93 ________ 194 ________ 195 ________ 196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>1 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>4 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>5 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>7 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>0____196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____166 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____168 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>0____196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>1____196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>919 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>83 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>84 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>92______193 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>919 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>95 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 Nó sẽ tạo ra kết quả sau 3) Độ rộng đường viền CSSThuộc tính chiều rộng đường viền được sử dụng để chỉ định chiều rộng của đường viền. It is setting by pixel. Bạn cũng có thể sử dụng một trong ba giá trị được xác định trước như mỏng, trung bình hoặc dày để chỉ định chiều rộng của đường viền Lưu ý. Thuộc tính độ rộng đường viền không được sử dụng bởi một mình. Nó luôn luôn được sử dụng với các thuộc tính đường viền khác nhau như thuộc tính “kiểu đường viền” để thiết lập đường viền trước, nếu không nó sẽ không hoạt động Ví dụ về thuộc tính độ rộng đường viền trong CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>91 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>92 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>93 ________ 194 ________ 195 ________ 196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>1 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>4 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>5 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>7 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>0____196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____221 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____223 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____225 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>0____196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>1____196 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>94 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>919 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>83 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>41 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>92____241 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______194 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>924 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>6 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>58 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>41 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>923 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>919 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>912 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>95 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 4) Bán kính đường viền CSSThuộc tính bán kính đường viền là một thuộc tính của css3 (áp dụng cho trình duyệt hỗ trợ css3) được sử dụng để bo tròn các góc của đường viền. It is setting by pixel Lưu ý. Thuộc tính độ rộng đường viền không được sử dụng bởi một mình. Nó luôn luôn được sử dụng với các thuộc tính đường viền khác nhau như thuộc tính “kiểu đường viền” để thiết lập đường viền trước, nếu không nó sẽ không hoạt động Ví dụ về thuộc tính bán kính đường viền trong CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>68 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>69 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>70 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>71 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>7 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>74 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______276______277 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>78 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>79 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>80______281 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>78 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>83 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>84 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>85 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>86 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______288 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>77 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>78 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>79 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>80 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>93 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>78 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>95 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>84 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>97 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>86 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>99 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>00 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>01 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____303 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>83 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>05 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______303 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>92 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>05 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>10 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>11 Nó sẽ tạo ra kết quả sau 5) Đường viền CSSThuộc tính CSS đường viền được sử dụng để thiết lập đường viền bao gồm cả 3 giá trị của độ rộng đường viền, kiểu đường viền và màu đường viền. This value has been stopped by the way Cú pháp CSS border 1 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>12 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>13 Ví dụ về thuộc tính bán kính đường viền trong CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>68 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>69 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>70 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>71 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>7 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>96 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>74 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______276____312 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>78 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>95 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>79 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>27 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>84 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>85 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>86 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______288 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>12 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>78 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>95 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>79 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>83 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>38 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>99 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>00 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>01 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2____303 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>83 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>05 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>2______303 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid double; } </style> </head> <body> <p> - Đường viền phía trên có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid<br> - Đường viền phía dưới có kiểu double </p> </body> </html>92 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>49 <!DOCTYPE html> <html> <head> <style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p> - Đường viền phía trên và dưới có kiểu dotted<br> - Đường viền bên trái và bên phải có kiểu solid </p> </body> </html>83 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>51 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>10 <!DOCTYPE html> <html> <head> <style type="text/css">p{ width: 500px; height: 500px; border:6px solid red; border-radius:500px; } </style> </head> <body> <p> </p> </body> </html>11 Nó sẽ tạo ra kết quả sau Hi vọng bài viết trên tenten giúp bạn hiểu thêm về border css và cách sử dụng border css. Hãy chia sẻ bài viết để lan tỏa kiến thức về border css đến với nhiều người hơn nhé |
