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:

html<div id="elem"></div>

css#elem {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  border-radius: 10px;
}

Результат: