border-radius

border-radius là gì?

Đối với những góc bo tròn, nếu không sử dụng border-radius thì sẽ rất phức tạp khi chỉ dùng CSS.

border-radius cho phép tạo độ bo góc tròn linh hoạt, cấu trúc đơn giản dễ sử dụng.

Cấu trúc

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

Giá trị	VD	Mô tả
px	5px	Độ bo góc tròn tính theo pixel
%	50%	Độ bo góc tròn tính theo %

Cách sử dụng

HTML viết:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>Border - radius</div>
</body>
</html>

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:

Border - radius

Bây giờ ta sẽ sử dụng border-radius để chỉnh độ bo góc tròn của 4 góc như sau.

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:

Border - radius

Nhìn kết quả trên, ta thấy 4 góc của <div> đã được thay đổi sang bo góc tròn.
VD sau đây sẽ cho ta thấy rõ hơn về cách sử dụng border-radius, với cách sử dụng giá trị phần trăm (%).

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:

Border - radius

Ví dụ thêm

Chúng ta có thể điều khiển từng góc riêng biệt thay vì điều khiển cùng lúc 4 góc.

Thuộc tính	VD	Mô tả
border-top-left-radius	border-top-left-radius: 5px	Độ bo góc tròn góc trên - bên trái.
border-top-right-radius	border-top-right-radius: 5px	Độ bo góc tròn góc trên - bên phải.
border-bottom-left-radius	border-bottom-left-radius: 5px	Độ bo góc tròn góc dưới - bên trái.
border-bottom-right-radius	border-bottom-right-radius: 5px	Độ bo góc tròn góc dưới - bên phải.

HTML viết:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>Border - radius</div>
</body>
</html>

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:

Border - radius

Tới đây chắc các bạn đã biết cách dùng border-radius như thế nào, các bạn cũng có thể xem nhiều ví dụ hơn tại phần tham khảo border-radius hoặc xem công cụ tạo border-radius nhé.

:nth-child

box-shadow