I've tried everything to fix my border radius issue

I have a image inside of another element. Both elements have the border-raidus property.

I've tried many things to get the property to work on the image. Works fine on parent.

I've tried bellow options and yet nothing:

• overflow:hidden
• !important
• border-collaspe:seperate
• perspective:1px

My code:

section {
    background-color: #e6e6e6;
    border-radius: 25px; /* works */
    height: 450px;
    text-align: center;
    opacity: .95;
    overflow: hidden;
    width: 90%;
    margin: 150px auto;
}

section img {
    border-radius: 10px; /* does not work */
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 35px;
}

It works, but is just not visible because you have used padding on the image.

Solution 1: Add 35px to your border radius, so in your case border-radius: 45px; to get an effective border radius of 10px.

Solution 2: Set image padding to 0 and image margin to 35px.