Lỗi các khung bị lồng lên nhau trong css năm 2024

Lưu ý: Khi đặt thuộc tính cho đường viền là none hoặc hidden thì người xem đều không nhìn thấy đường viền. Nhưng none là không có, còn hidden 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.

Các thuộc tính cơ bản về border css

Cách khai báo định dạng border css kiểu shorthand

Thay vì phải khai báo từng thuộc tính một dòng thì bạn có thể viết rút gọn lại.

Cú pháp: border: value1 value2 value3;

Ví dụ: border: solid

009999 8px;

Định dạng border css theo từng cạnh

Trong thực tế không phải lúc nào cũng định dạng 4 cạnh đường viền như nhau mà chúng ta có thể định dạng mỗi cạnh đường viền theo một kiểu, tương ứng với các vị trí: Top [trên]; right [phải]; bottom [dưới]; left [trái]

1. Cách khai báo cơ bản

Chúng ta sẽ khai báo theo vị trí của từng cạnh. Cú pháp là: border-vị trí-thuộc tính: giá trị;

Ví dụ:

border:6px solid red;

border-top-color: greenyellow;

}

2. Cách khai báo kiểu shorthand [viết tắt]

Cú pháp 1: border-style: value1 value2 value3 value4;

– Ví dụ:

  
    p{  
        border-style:dotted solid double dashed;  
    }

Đường viền phía trên có kiểu là dotted
Đường viền bên phải có kiểu là solid
Đường viền phía dưới có kiểu là double
Đường viền bên trái có kiểu là dashed
```
  
```
Cú pháp 2: border-style: value1 value2 value3;

  
    p{  
        border-style:dotted solid double;  
    }

Đường viền phía trên có kiểu dotted
Đường viền bên trái và bên phải có kiểu solid
Đường viền phía dưới có kiểu double
```
  
```

Cú pháp 3: border-style: value1 value2;

  
    p{  
        border-style:dotted solid;  
    }

Đường viền phía trên và dưới có kiểu dotted
Đường viền bên trái và bên phải có kiểu solid
```
  
```

Định dạng border css theo từng cạnh

Thuộc tính border radius

Thuộc tính border-radius được bổ sung vào CSS 3, radius 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 viền.

– Cú pháp 1: border-radius: value1 value2 value3 value4; Tương ứng với các góc: trái trên, phải trên, trái dưới, phải dưới.

– Cú pháp 2:border-radius: 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:border-radius: 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: border-radius: value; Tương ứng với cả 4 góc

Ví dụ 1: border-radius: 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ố border-radius bằng nhau

p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }

Kết quả: trở thành 1 hình tròn

‘

CSS Border hay thuộc tính border trong CSS được sử dụng để thiết lập đường viền trên một phần tử.

Các thuộc tính border trong CSS được sử dụng để chỉ định kiểu cách, màu sắc và kích thước của đường viền của một phần tử. Các thuộc tính CSS border được đưa ra dưới đây:

border-style
border-color
border-width
border-radius
border

Một số loại border css

1] CSS border-style

Thuộc tính border-style được sử dụng để chỉ định kiểu đường biên mà bạn muốn hiển thị trên trang web.

Các giá trị của thuộc tính border-style được liệt kê trong bảng sau:

Giá trị Mô tả none Nó chỉ định 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 [dotted]. dashed Nó được sử dụng để xác định một đường viền dashed. solid Nó được sử dụng để xác định một đường viền solid. double Nó định nghĩa hai đường viền với giá trị chiều rộng đường viền giống nhau. groove Nó định nghĩa một đường viền 3D groove. Hiệu ứng được tạo ra theo giá trị border-color. ridge Nó định nghĩa một đường viền 3D ridge. Hiệu ứng được tạo ra theo giá trị border-color. inset Nó định nghĩa một đường viền 3D inset. Hiệu ứng được tạo ra theo giá trị border-color. outset Nó định nghĩa một đường viền 3D outset. Hiệu ứng được tạo ra theo giá trị border-color. hidden Nó xác định đường viền không được hiển thị.

Ví dụ về thuộc tính border-style trong CSS:

DOCTYPE html>

  
    p{  
        border-style:dotted solid;  
    }

  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
3

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
5

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
7

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
9

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
1
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
3
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
5

  

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
7
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
9
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2`
`
  
  
  
  
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
0`>`
`
  
  
  
  
    p{  
        border-style:dotted solid double;  
    }  
  
  
    
Đường viền phía trên có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid
  
Đường viền phía dưới có kiểu double    
  
1`>`
`

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2`5`html>`6`DOCTYPE`3>`
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``
9>`
 >
2] CSS border-color
Thuộc tính border-color đượ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 của đường viền như sau.
Name: Nó chỉ định tên màu. Ví dụ: “red”.
RGB: Nó chỉ định giá trị RGB của màu. Ví dụ: “rgb[255,0,0]”.
Hex: Nó chỉ định giá trị hex của màu. Ví dụ: “
ff0000”.
Ngoài ra còn có một màu đường viền có tên “transparent”. Nếu màu đường viền không được thiết lập nó được kế thừa từ thuộc tính màu của phần tử.
Lưu ý: thuộc tính border-color không được sử dụng một mình. Nó luôn luôn được sử dụng với các thuộc tính border khác như thuộc tính “border-style” để 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>
`
`
`


  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid double;  
    }  
  
  
    
Đường viền phía trên có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid
  
Đường viền phía dưới có kiểu double    
  
66
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid double;  
    }  
  
  
    
Đường viền phía trên có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid
  
Đường viền phía dưới có kiểu double    
  
68
`
  
  
  
  
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
0`>`
`
  
  
  
  
    p{  
        border-style:dotted solid double;  
    }  
  
  
    
Đường viền phía trên có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid
  
Đường viền phía dưới có kiểu double    
  
1`>`
`

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``
9>`
 >
Nó sẽ tạo ra kết quả sau:
3] CSS border-width
Thuộc tính border-width được sử dụng để chỉ định chiều rộng của đường viền. Nó được thiết lập bằng pixel. Bạn cũng có thể sử dụng một trong ba giá trị được định nghĩa trước như thin, medium hoặc thick để chỉ định chiều rộng của đường viền.
Lưu ý: thuộc tính border-width không được sử dụng một mình. Nó luôn luôn được sử dụng với các thuộc tính border khác như thuộc tính “border-style” để 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-width trong CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 DOCTYPE html>
`
`
`


  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid  

  
  
  
  
2

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
21

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
23

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
25
`
  
  
  
  
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
0`>`
`
  
  
  
  
    p{  
        border-style:dotted solid double;  
    }  
  
  
    
Đường viền phía trên có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid
  
Đường viền phía dưới có kiểu double    
  
1`>`
`

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2``
9>`
 >
4] CSS border-radius
Thuộc tính border-radius là một thuộc tính của css3 [áp dụng cho các trình duyệt hỗ trợ css3] được sử dụng để bo tròn các góc của đường viền. Nó được thiết lập bằng pixel.
Lưu ý: thuộc tính border-width không được sử dụng một mình. Nó luôn luôn được sử dụng với các thuộc tính border khác như thuộc tính “border-style” để 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-radius trong CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
68

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
69

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
70

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
71

  
  
    
    p{  
        border-style:dotted solid double;  
    }  
  
  
    
Đường viền phía trên có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid
  
Đường viền phía dưới có kiểu double    
  
7`>`
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
74

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
76

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
77

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
78

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
79

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
80

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
81

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
78

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
83

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
84

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
85

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
86

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
88

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
77

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
78

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
79

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
80

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
93

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
78

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
95

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
84

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
97

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
86

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
99
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
00
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
01
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
03
  
  
    
    p{  
        border-style:dotted solid double;  
    }  
  
  
    
Đường viền phía trên có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid
  
Đường viền phía dưới có kiểu double    
  
83
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
05
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
03
  
  
    
    p{  
        border-style:dotted solid double;  
    }  
  
  
    
Đường viền phía trên có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid
  
Đường viền phía dưới có kiểu double    
  
92
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
05
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
10
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
11
Nó sẽ tạo ra kết quả sau:

  


5] CSS border
Thuộc tính CSS border được sử dụng để thiết lập đường viền bao gồm cả 3 giá trị của border-width, border-style và border-color. Các giá trị này được ngăn cách bởi dấu cách.
Cú pháp CSS border:
1
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
12
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
13
Ví dụ về thuộc tính border-radius trong CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
68

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
69

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
70

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
71

  
  
    
    p{  
        border-style:dotted solid double;  
    }  
  
  
    
Đường viền phía trên có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid
  
Đường viền phía dưới có kiểu double    
  
7`>`
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
74

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
76
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
12
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
78

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
95 

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
79 
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
27
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
84

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
85

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
86

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
88
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
12
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
78

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
95 

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
79 

  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
83
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
38
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
99
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
00
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
01
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
03
  
  
    
    p{  
        border-style:dotted solid double;  
    }  
  
  
    
Đường viền phía trên có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid
  
Đường viền phía dưới có kiểu double    
  
83
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
05
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
2
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
03
  
  
    
    p{  
        border-style:dotted solid double;  
    }  
  
  
    
Đường viền phía trên có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid
  
Đường viền phía dưới có kiểu double    
  
92
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
49
  
  
    
    p{  
        border-style:dotted solid;  
    }  
  
  
    
Đường viền phía trên và dưới có kiểu dotted
  
Đường viền bên trái và bên phải có kiểu solid    
  
  
83 
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
51
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
10
  
  
  
p{  
        width: 500px;  
        height: 500px;  
        border:6px solid red;  
        border-radius:500px;  
    }  
  
  
        
  
  
11
Nó sẽ tạo ra kết quả sau:
Hi vọng bài viết trên của tenten giúp bạn có thêm hiểu biết 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 nhiều người hơn nhé!


				
					

                 
	Bài Viết Liên Quan
	
	 	
		
		   
		   
		   
		
		
			Hoa nào được mệnh danh là quốc sắc thiên hương năm 2024

		
	

		
		
		   
		   
		   
		
		
			Giáo phận thanh hóa truyền chức đức cha cường năm 2024

		
	

		
		
		   
		   
		   
		
		
			Cách hạch toán chi phí nhập xe o6to 7 chỗ năm 2024

		
	

		
		
		   
		   
		   
		
		
			Bài tập gioi tu mệnh đề quan hệ năm 2024

		
	

		
		
		   
		   
		   
		
		
			Bài 44 sgk toán 9 trang 87 tập 2 năm 2024

		
	

		
		
		   
		   
		   
		
		
			Bệnh viện đa khoa hải dương có những khoa nào năm 2024

		
	

		
		
		   
		   
		   
		
		
			Hướng dẫn mã hóa hệ thống trên win 10 năm 2024

		
	

		
		
		   
		   
		   
		
		
			Bàn về phương pháp nghiên cứu văn học năm 2024

		
	

		
		
		   
		   
		   
		
		
			Top những thương hiệu máy tính bảng nổi tiếng năm 2024

		
	

		
		
		   
		   
		   
		
		
			Cách thức thanh toán xuất khẩu hiện tại năm 2024

		
	

		
		
		   
		   
		   
		
		
			Phiếu bài tập tiếng việt lớp 2 tuần 8 năm 2024

		
	

		
		
		   
		   
		   
		
		
			Cách nhà bán hàng xuất hóa đơn cho khách hàng năm 2024

		
	

		
		
		   
		   
		   
		
		
			Lỗi ko tải được poker king trung quốc năm 2024

		
	

		
		
		   
		   
		   
		
		
			Một số đề thi học sinh giỏi hóa lớp 11 năm 2024

		
	

		
		
		   
		   
		   
		
		
			Văn bằng 2 đại học ngoại ngữ tphcm năm 2024

		
	

		
		
		   
		   
		   
		
		
			Gợi ý đề thi thử nghiệm môn hóa violet năm 2024

		
	

		
		
		   
		   
		   
		
		
			Bán nhà đường phạm văn thuận biên hòa năm 2024

		
	

		
		
		   
		   
		   
		
		
			Bài tập giới hạn lượng giác có đáp án năm 2024

		
	

		
		
		   
		   
		   
		
		
			Khi nào dùng said và told trong câu gián tiếp năm 2024

		
	

		
		
		   
		   
		   
		
		
			Phần khởi động bài tính chất hóa họcj của axit năm 2024

		
	

	
	




Toplist mới

 
	
	 
		#1
		
			Top 9 người ta điều chế pvc theo chuyển hóa sau 2023
			6 tháng trước
		
	



	
	 
		#2
		
			Top 6 mẫu số 01 -- tt phiếu thu thông tư 200 2023
			6 tháng trước
		
	



	
	 
		#3
		
			Top 9 cây đại phú gia ra hoa bảo hiệu điều gì 2023
			6 tháng trước
		
	



	
	 
		#4
		
			Top 6 an ninh trật tự, an toàn xã hội la gì 2023
			6 tháng trước
		
	



	
	 
		#5
		
			Top 8 trong chiến dịch biên giới thu - đông 1950 trận đánh nào ác liệt và có ý nghĩa nhất 2023
			6 tháng trước
		
	



	
	 
		#6
		
			Top 9 nghĩa quân tây sơn đánh tan quân thanh trong trận đánh nào 2023
			6 tháng trước
		
	



	
	 
		#7
		
			Top 8 khoa học lớp 5 tập 2 phiếu kiểm tra 4 2023
			6 tháng trước
		
	



	
	 
		#8
		
			Top 8 lớp lõi trái đất có trạng thái 2023
			6 tháng trước
		
	



	
	 
		#9
		
			Top 8 vở bài tập toán lớp 4 tập 1 bài 78: chia cho số có ba chữ số trang 89 2023
			6 tháng trước
		
	






		


	Bài mới nhất
	
	 	
		
		   
		   
		   
		
		
			Cổng thanh toán điện tử quy mô thị tường năm 2024

		
	

		
		
		   
		   
		   
		
		
			376 võ văn tần p.5 q.3 tp hcm năm 2024

		
	

		
		
		   
		   
		   
		
		
			Đồng hồ nam hãng nàogiá trung bình năm 2024

		
	

		
		
		   
		   
		   
		
		
			Lỗi ứng dụng mobitv của viettel tự dừng năm 2024

		
	

		
		
		   
		   
		   
		
		
			Etc là viết tắt của từ gì năm 2024

		
	

		
		
		   
		   
		   
		
		
			Precious metal tips for bolo ties nghĩa là gì năm 2024

		
	

		
		
		   
		   
		   
		
		
			Soạn văn bài lặng lẽ sa pa giáo án năm 2024

		
	

		
		
		   
		   
		   
		
		
			Thành phần chính của xác thực vật là gì năm 2024

		
	

		
		
		   
		   
		   
		
		
			Thời kỳ văn hóa hậu lê cơ sở văn hóa năm 2024

		
	

		
		
		   
		   
		   
		
		
			Anh yêu em số là gì năm 2024

		
	

	
	
                 
	Chủ Đề
	
	
	
		  Toplist
		  Địa Điểm Hay
		  Hỏi Đáp
		  Là gì
		  programming
		  Mẹo Hay
		  Nghĩa của từ
		  Học Tốt
		  Công Nghệ
		  Khỏe Đẹp
		  bao nhiêu
		  mẹo hay
		  Top List
		  Bao nhiêu
		  Bài Tập
		  Sản phẩm tốt
		  Xây Đựng
		  Ngôn ngữ
		  đánh giá
		  Tiếng anh
		  Bài tập
		  So Sánh
		  Ở đâu
		  So sánh
		  Hướng dẫn
		  Dịch 
		  bao nhieu
		  Tại sao
		  Đại học
		  hướng dẫn
		  Máy tính
		  Thế nào
		  Vì sao
		  Bao lâu
		  Khoa Học
		  Hà Nội
		  Món Ngon