Bo tròn đường viền khối trong CSS
Bây giờ chúng ta sẽ học cách bo tròn các góc
của một khối. Để làm điều này, nên sử dụng
thuộc tính border-radius, nhận
giá trị bằng pixel.
Việc chúng ta chỉ định độ bo tròn,
ví dụ, 10px có nghĩa là gì? Đó là bán kính của hình tròn,
có thể được nội tiếp trong độ bo tròn đó. Nếu
bạn không giỏi toán và bạn không hiểu
câu cuối cùng - hãy quên nó đi và
chỉ cần điều chỉnh độ bo tròn bằng mắt. Với
một chút kinh nghiệm thì việc này không thành vấn đề (không có
công cụ đo lường nào để đo độ bo tròn,
ít nhất là tôi chưa nghe thấy).
Hãy bo tròn các góc của khối bằng cách đặt
độ bo tròn là 10px:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
Lặp lại trang theo mẫu này: