My images have rounded corners and I can't understand why

[willywongi]

Starting somewhere in beta.3, I noticed the logo on my webapp has rounded corners. See that missing bit in the first letter of "linda"?

Doing some poor man debugging, I found a rule in native.css setting a rounded corner on all img elements:

@layer wa-native {
  img, svg, picture, video {
    max-width: 100%;
    height: auto;
    border-radius: var(--wa-border-radius-m);
  }
}

I mentioned it in a related issue that has been solved since (on 17/Jul), but only for that card-related problem.

This is how I include webawesome css in my pages:

<link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/webawesome.css"/>
<link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/themes/default.css" />

I am willing to believe I'm doing something wrong: could someone help me shed a light on this?
Thank you!

[claviska]

We're using CSS layers, which are designed to be easy to override. If you add this to your own stylesheet, the images will no longer have rounded corners:

img {
  border-radius: 0;
}

View example

[willywongi]

I KNEW I was missing something. Grazie!

Still, please consider if this is a sensible default.

Thank you for all the web awesomeness!