I have been trying to design my website for every screen sizes and what I want to do is get rid of border-radius of my img when the screen size is smaller than 375px. I have tried css media at-rule but did not work.

HTML:

`<figure>
   <img src="image-omelette.jpeg" alt="">
</figure>`

CSS:

`@media screen and (max-width: 375px) { 
  img {    
        border-radius: 0;
  }
}

img {
    width: 100%;
    border-radius: 25px;
}`

Make sure your media query is placed after the base styles. Your CSS should look like this:

img {
    width: 100%;
    border-radius: 25px;
}

@media screen and (max-width: 375px) { 
  img { border-radius: 0; }
}