CSS rounded blurred border

user_12401845 0
Viewed 93

I have an ionic4 app where i need to achieve an img effect similar to the one in the card below. Blur at the edges down to the centre and then clear at the center with another white border

enter image description here

How can i achieve this? Please ignore the edit icon

ionic4 css
1 Answers
<!-- Floating image-->
<img class="cardImage" src="{{card.img}}"><br>

<!-- Background -->
<img class="cardImage2" src="{{card.img}}"><br>


.cardImage {
  width: 92%;
  object-fit: cover;
  border:1px solid #021a40;
  position: absolute;
  clip-path: circle();
  top: 25px;
  margin-left: 4%;
  height: 110px;
}

.cardImage2 {
  width: 92%;
  object-fit: cover;
  opacity: 0.25;
  border-radius: 15px;
  margin-left: 4%;
  height: 130px;
}
user_124018450
Related