Question 43921 in Html Question posted in
Some basic documentation can be found here.

can't use css border radius property – Html

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%;
Tags:

2

Answers


  1. 0

    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%

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search