Hướng dẫn border-radius trong html - bán kính đường viền trong html

• Trang chủ
• Tham khảo
• CSS
• CSS3
• Thuộc tính border-radius

Định nghĩa và sử dụng

Thuộc tính border trong css3 dùng để định dạng các dạng bo góc của border ngoài dạng đã được định nghĩa ở css2 (Xem thêm về border trong css2).

Cấu trúc

tag {
    border: bề-dày kiểu mã-màu;
    border-radius: giá trị;
    -moz-border-radius: giá trị;
    -webkit-border-radius: giá trị;
    -ms-border-radius: giá trị;
    -o-border-radius: giá trị;
}

Trong đó:

• -moz-animation hỗ trợ cho firefox.
• -webkit-animation hỗ trợ cho Google Chrome và Safari.
• -ms-animation hỗ trợ cho Internet Explorer.
• -o-animation hỗ trợ cho Opera.

HTML viết:

border image

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

Hiển thị trình duyệt khi có CSS:

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS3
• border-radius

border-radius là gì?

Đối với những góc bo tròn, nếu không sử dụng

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

Cấu trúc

tag {
    border-radius: giá-trị;
}

Cách sử dụng

HTML viết:

Border - radius

CSS viết - khi chưa sử dụng border-radius:

div {
    border: 3px solid #ffcccc;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 100px;
}

Hiển thị trình duyệt:

Bây giờ ta sẽ sử dụng

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

CSS viết:

div {
    border: 3px solid #ffcccc;
    border-radius: 10px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 100px;
}

Hiển thị trình duyệt:

Bây giờ ta sẽ sử dụng

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

CSS viết:

div {
    border: 3px solid #ffcccc;
    border-radius: 50%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 100px;
}

Hiển thị trình duyệt:

Bây giờ ta sẽ sử dụng p { border: 2px solid #cc0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }1 để chỉnh độ bo góc tròn của 4 góc như sau.

CSS viết:

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

HTML viết:

Border - radius

CSS viết:

div {
    border: 3px solid #ffcccc;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 100px;
}

Hiển thị trình duyệt:

Bây giờ ta sẽ sử dụng

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

(tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 125px 75px)

Góc bottom-left sẽ có độ cong là 25px/25pxborder-radius dùng để thiết lập "độ cong" các góc của phần tử HTML.

(tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 25px 25px)

Góc bottom-right sẽ có độ cong là 125px/100px

• (tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 125px 100px)
• Góc bottom-left sẽ có độ cong là 50px/25px
• (tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 50px 25px)
• Góc top-right sẽ có độ cong là 15px/75px

(tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 15px 75px)

Góc bottom-right sẽ có độ cong là 250px/100px

(tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 250px 100px)border-radius, ta dùng cú pháp như sau:

border image

Góc bottom-left sẽ có độ cong là 15px/75pxborder-radius có thể được xác định bởi một trong năm loại:

- Ví dụ:

Các góc của phần tử này có độ cong là 10px.border-radius với cú pháp ở phần hướng dẫn phía trên thì mặc định cả bốn góc của phần tử sẽ có chung một độ cong.

Góc top-left của phần tử này có độ cong là 0px.

• Góc top-right của phần tử này có độ cong là 50px.
• Góc bottom-left của phần tử này có độ cong là 50px.
• Góc bottom-right của phần tử này có độ cong là 100px.
• Góc top-right sẽ có độ cong là 15px/75px

(tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 15px 75px)

Góc bottom-right sẽ có độ cong là 250px/100px

border image

• (tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 250px 100px)
• Góc bottom-left sẽ có độ cong là 15px/75px
• Góc bottom-right của phần tử sẽ có độ cong là value3
• Góc bottom-left của phần tử sẽ có độ cong là value4

border image

Xem ví dụ

3.2) Cú pháp 2

border image

• Góc top-left của phần tử sẽ có độ cong là value1
• Góc top-right & bottom-leftcủa phần tử sẽ có độ cong là value2
• Góc bottom-right của phần tử sẽ có độ cong là value3

border image

Xem ví dụ

3.2) Cú pháp 2

border image

• Góc top-left của phần tử sẽ có độ cong là value1
• Góc top-right & bottom-leftcủa phần tử sẽ có độ cong là value2

border image

Xem ví dụ

3.2) Cú pháp 2

Góc top-left của phần tử sẽ có độ cong là value1

Góc top-right & bottom-leftcủa phần tử sẽ có độ cong là value2

border image

Góc bottom-right của phần tử sẽ có độ cong là value3

• 3.3) Cú pháp 3
• Góc top-left & bottom-right của phần tử sẽ có độ cong là value1

Góc top-right & bottom-left của phần tử sẽ có độ cong là value2

border image

4) Thiết lập độ cong của từng góc (khi giá trị là width/height)

• - Nếu ta thiết lập độ cong từng góc của phần tử theo cách xác định độ cong dựa vào chiều rộng & chiều cao chỉ định thì cú pháp sẽ tương đối khác so với ba cú pháp ở phần hướng dẫn phía trên.

- Dưới đây là cú pháp thiết lập độ cong của từng góc khi giá trị là width/height:

• - Trong đó:

Bộ giá trị thứ nhất dùng để xác định chiều rộng các góc của phần tử HTML.

• Bộ giá trị thứ hai dùng để xác định chiều cao các góc của phần tử HTML.

- Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau:

• - Khi đó:

Góc top-left sẽ có độ cong là 250px/100px

Góc top-right & bottom-left của phần tử sẽ có độ cong là value2

border image

4) Thiết lập độ cong của từng góc (khi giá trị là width/height)

• - Nếu ta thiết lập độ cong từng góc của phần tử theo cách xác định độ cong dựa vào chiều rộng & chiều cao chỉ định thì cú pháp sẽ tương đối khác so với ba cú pháp ở phần hướng dẫn phía trên.

- Dưới đây là cú pháp thiết lập độ cong của từng góc khi giá trị là width/height:

• - Trong đó:

Bộ giá trị thứ nhất dùng để xác định chiều rộng các góc của phần tử HTML.

• Bộ giá trị thứ hai dùng để xác định chiều cao các góc của phần tử HTML.

- Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau:

• - Khi đó:

Góc top-left sẽ có độ cong là 250px/100px

Góc top-right & bottom-left của phần tử sẽ có độ cong là value2

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

4) Thiết lập độ cong của từng góc (khi giá trị là width/height)

• - Nếu ta thiết lập độ cong từng góc của phần tử theo cách xác định độ cong dựa vào chiều rộng & chiều cao chỉ định thì cú pháp sẽ tương đối khác so với ba cú pháp ở phần hướng dẫn phía trên.

- Dưới đây là cú pháp thiết lập độ cong của từng góc khi giá trị là width/height:

• - Trong đó:

Bộ giá trị thứ nhất dùng để xác định chiều rộng các góc của phần tử HTML.

• Bộ giá trị thứ hai dùng để xác định chiều cao các góc của phần tử HTML.

- Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau:

• - Khi đó:

Góc top-left sẽ có độ cong là 250px/100px