can't use css border radius property

Question

I'm trying to make an instagram clone site, it's time for the story part, but when I make the border of my picture linear-gradient, the border-radius feature does not work. please help me to fix this problem

.story-card img {
  width: 65px;
  height: 65px;
  border-radius: 360%;
}

.story-card {
  border: 2px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to bottom, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}

<div class="main-container">
  <section class="story">
    <div class="story-card">
      <img src="img/fb.jpg" alt="">
    </div>
  </section>
</div>

I tried;

border-radius : 50%;

You understand percentages go from 0-100 yes? – j08691 Mar 16 '23 at 17:58 — j08691, Mar 16 '23 at 17:58

score -1 · Answer 1 · answered Mar 16 '23 at 17:59

-1

your .story-card img rule creates border-radius for only inner image.

just add border-radius: 360%; to .story-card

Tip: if you use border-radius with percentage value, it can't be more than 100%. it's better to make it 100%

answered Mar 16 '23 at 17:59

A.Rahman Al-Khateeb

3
3

Andrew · Answer 2 · 2023-03-16T18:37:53.207

You can use a solution with mask (from here)

.story-card img {
  width: 65px;
  height: 65px;
  border-radius: 100%;
}

.circle {
  width: 68px;
  height: 68px;
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 100%;
  border: 2px solid transparent;
  background: linear-gradient(to bottom, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

<div class="main-container">
  <section class="story">
    <div class="story-card">
      <div class="circle"></div>
      <img src="https://openclipart.org/image/800px/215819" alt="">
    </div>
  </section>
</div>

can't use css border radius property

2 Answers2