Не могу изменить края изображения

Question

Не могу изменить края изображения, изначально изображение квадратное, а я хочу сделать его круглым, использую команду border-radius: 50%, вроде бы написано всё правильно, но почему-то изменении нет.

Как я понял у меня какие-то проблемы с приоритетами, но я ещё плохо во всём этом разбираюсь, так как только недавно начал учиться.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>world</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />
    <style>
      .rounded {border-radius: 50%;}
    </style>
  </head>
  <body>
    <img class="rounded" src="lyfi.jpg" alt="error" />
  </body>
</html>

Answer 1

Попробуй задать этот параметр в пикселях px и поставить число, не меньшее размера картинки(можешь рандомно 99999999 залепить).Скриншоты кода не прикрепляй пожалуйста, их невозможно разбирать, лучше сам код.

Такой класс уже описан в bootstrap, попробуй переименовать его и использвать css свойства в css файле

БЛОГ НА HUSL

Не могу изменить края изображения

Ответы (1 шт):