Заокруглені кути

Описуються border-radius.
Заокруглювати кути можна у всьому - з квадрата зробити коло, з прямокутника - овал. Зробити круглою картинку чи фото, та навіть краї відео, а також краї таблиці, або змоделювати рамочку, заокругливши внутрішні та зовнішні кути.

1. Овал

<style>
           radius {
       height: 200px;
  border: 7px solid red;
  border-radius: 100%; 
}
</style>

<div class="radius">...</div>

2. Коло

                 <style>
              .radius {
        width: 200px; height: 200px;
        border: 7px solid red;
        border-radius: 100%; 
      }
      </style>

     <div class="radius">...</div>

3. Заокруглені три кути, крапля

<style>
.radius {
  width: 200px; height: 200px;
  border: 7px inset red;
  border-radius: 0% 100% 100%;
}
</style>

<div class="radius">...</div>

4. Півкруг

                <style>
             .radius {
  width: 200px; height: 200px;
  border: 1px dashed red;
  border-radius: 100% 100% 0% 0%;
}
</style>

<div class="radius">...</div>

5. Листок

                       <style>
                    .radius {
         width: 200px; height: 200px;
           border: 7px groove red;
      border-radius: 70% 0 / 70%;
      }
      </style>

<div class="radius">...</div>

А також, наприклад, картинка, фото - додати в режимі HTML код

  style="border-radius: 100%