Remove style attribute from element when full width of screen

Question

I need to remove a css style attribute when the element reaches full width of the screen. For example, the style has a border radius that should be set to 0 or otherwise removed when the element reaches the full width of the screen. This is easily done with javascript, but hoping to have a pure-css solution.

body {
  margin: 0;
  padding: 0;
}
.container {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  max-width: 500px;
  background: #aaa;
  color: white;
  border-top-right-radius: 20px;
  box-sizing: border-box;
  padding: 20px;
}

<div class="container">Test</div>

Answer 1

Since your element is position: absolute you can use 100vw and perform a clamp testing.

I have a detailed article about such technique (and more): https://css-tricks.com/responsive-layouts-fewer-media-queries/

body {
  margin: 0;
  padding: 0;
}
.container {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  max-width: 500px;
  background: #aaa;
  color: white;
  /* 0px if 500px > 100vw. 20px if 500px < 100vw */
  border-top-right-radius:clamp(0px,(100vw - 500px)*999,20px);
  box-sizing: border-box;
  padding: 20px;
}

<div class="container">Test</div>