Из предыдущего урока вы могли узнать о нескольких интересных типах рамок. В этом уроке будет показано, как задать с помощью стилей закруглённые рамки блокам. Для этого нужно воспользоваться атрибутом - border-radius: … ;
Сделаем несколько наглядных примеров, демонстрирующих работу этого атрибута.
И что бы примеры не выглядели скучными - к ним будут применены стилевые атрибуты, задающие: толщину, цвет и тип рамки; цвет заднего фона; отступы; длина и высота.

Блок со слегка закруглёнными рамками - border-radius: 8px;

<style>
#div_r_0 {
border: 2px solid Black;
background: #F5F6E9;
width: 40%;
height: 100px;
text-align: center;
padding: 5px;
border-radius: 8px;
}
</style>

<div id="div_r_0">
Блок со слегка закруглёнными рамками
</div>

Блок с сильно закруглёнными рамками - border-radius: 32px;

<style>
#div_r_1 {
border: 2px solid Orange;
border-style: dashed;
background: #DDFFAC;
width: 40%;
height: 100px;
text-align: center;
padding: 5px;
border-radius: 32px;
}
</style>

<div id="div_r_1">
Блок с сильно закруглёнными рамками, к которым применён пунктирный стиль
</div>

Для того, что бы получился блок в форме окружности – длину и высоту нужно задать одинакового размера, а border-radius: должен быть равен 50%

<style>
#div_r_2 {
border: 4px solid Red;
border-style: dotted;
background: #FBFFAC;
text-align: center;
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>

<div id="div_r_2">
<br>
<br>
<br>
Круглый блок c рамкой из точек
</div>

Параметр border-radius: можно задать для каждого угла по отдельности. Ниже представлен код совсем "нестандартного" блока – верхний левый и нижний правый угол закруглённые (по 32px), а остальные два прямые.

<style>
#div_r_3 {
border: 3px solid #B4F651;
background: #F4FFEB;
text-align: center;
width: 250px;
height: 200px;
border-top-left-radius: 32px;
border-top-right-radius: 0;
border-bottom-right-radius: 32px;
border-bottom-left-radius: 0;
}
</style>

<div id="div_r_3">
<br>
Красиввый блок
</div>