Making an image using border-radius blurred causing the edges to not have border-radius

I have an image that has a border-radius property and I want it to be blurred while hovering over it. But when I hover over it the blur applies but the border-radius property is not applied. How can I fix this?

I tried adding border-radius to different classes but none worked.

I'm not sure what code to share. Maybe this could be helpful. The .entry-thumbnail refers to the image post:

    .entry-thumbnail {

        position: relative;

        .entry-thumbnail:after {
            display: block;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            opacity: 0;
            transition: opacity 200ms linear;
        }

    }

}

a:hover .entry-thumbnail:after {
    opacity: 1;
}

.secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    opacity: 0;
    transition: opacity 200ms linear;
}
a:hover .secondary, a.hover .secondary {
    opacity: 1;
}

What I added was this:

img {
    border-radius: 10px;
}

img:hover {
    -webkit-filter: blur(4px); /* Chrome, Safari, Opera */
    filter: blur(10px);
}

I think your blur is a bit strong, if you want to keep a clear border-radius, you have to wrap it in a container that has the border-radius and overflow: hidden

.wrapper {
  overflow: hidden;  
  border-radius: 20px;
  width: 200px;
  height: 200px;
}
img {
  &:hover {
    filter: blur(5px);
  }
}

<div class="wrapper">
  <img src="https://placehold.co/200x200" />
</div>