Возможно ли указать border-radius только для границы, а не для всего объекта?

Question

Дано задание, чтобы вокруг картинки были 2 круга. Мне пришлось сделать 2 div, чтобы это сделать. Но можно ли просто окгруглить ТОЛЬКО границы картинки не затрягивая саму картинку?

.projects__blog {
  display: flex;
  align-items: center;
  width: 16.6%;
  margin-left: 50px;
}

.project__photo {
  width: 40px;
  height: 40px;
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 110px;
  border: 1px solid #E0E0E0;
  border-radius: 50%;
}

.circle2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border: 1px solid #4985FF;
  border-radius: 50%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="about__projects">
    <div class="container">
      <div class="projects__inner">
        <div class="projects__blog">
          <div class="projects__icon">
            <div class="social__item">
              <div class="circle">
                <div class="circle2">
                  <img class="project__photo" src="https://i.stack.imgur.com/Wg7EN.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

БЛОГ НА HUSL

Возможно ли указать border-radius только для границы, а не для всего объекта?

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