0

Good morning, I'm not able to make the border to be round around the image. I appreciate if anyone can help. The border radius is not being applied.

expected outcome

body {
  background-position: top center;
  background-size: 100% auto;
  background-color: #121214;
}

header {
  text-align: center;
  margin-top: 40px;
}

header div {
  width: 150px;
  margin: auto;
  display: flex;
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(90deg, #C91842 0%, #5CC2E2 100%)1;
}

header div img {
  width: 100%;
  border-radius: 50%;
}
<header>
  <div>
    <img src="https://img.cppng.com/download/2020-06/36046-4-mario-party-transparent.png" alt="mario">
  </div>
</header>
Pete
  • 57,112
  • 28
  • 117
  • 166
spikebr13
  • 1
  • 1
  • 1
    I think the problem is the grantient. See https://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient – Sebastian Sep 20 '22 at 13:32
  • for infos, gradients can be stacked, one hidding the other and be set on the image itself https://jsfiddle.net/m5vqwg2z/ – G-Cyrillus Sep 20 '22 at 14:02

0 Answers0