Bo góc

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 40 trên 76.

Trong CSS, thuộc tính border-radius dùng để tạo các góc bo tròn cho một phần tử. Thuộc tính này cho phép bạn chỉ định bán kính cong của từng góc, giúp bạn kiểm soát hình dạng đường viền của phần tử. Đây là cú pháp cơ bản để dùng thuộc tính border-radius:

selector {
    border-radius: value;
}

value: Bán kính mong muốn cho các góc bo tròn, có thể được chỉ định bằng pixel (px), em (em), phần trăm (%) hoặc các đơn vị CSS hợp lệ khác.

Bạn có thể chỉ định một giá trị để áp dụng cùng một bán kính cho cả bốn góc. Trong ví dụ sau, tất cả phần tử <div> sẽ có các góc bo tròn với bán kính 10px.

div {
    border-radius: 10px;
}

Bạn có thể đặt giá trị riêng cho từng góc theo thứ tự sau: trên bên trái, trên bên phải, dưới bên phải, dưới bên trái.

.button {
    border-radius: 10px 20px 30px 40px;
}

Bạn cũng có thể chỉ định hai giá trị: giá trị thứ nhất áp dụng cho góc trên bên trái và góc dưới bên phải, còn giá trị thứ hai áp dụng cho góc trên bên phải và góc dưới bên trái.

img {
    border-radius: 20px 50px;
}

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có hai phần tử <div>, mỗi phần tử có một trong hai lớp "one" và "two". Hãy làm theo các bước dưới đây:

Viết một quy tắc CSS dùng bộ chọn lớp để chọn tất cả phần tử có lớp “one”. Đặt border thành 3px solid #4287f5 và border-radius thành 15px để tạo các góc bo tròn giống nhau.
Viết một quy tắc CSS dùng bộ chọn lớp để chọn tất cả phần tử có lớp “two”. Đặt border thành giá trị bất kỳ và border-radius thành giá trị bất kỳ mà bạn chọn.

Tự làm thử

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>