The menu

Square the corners of the sheet

Every corner in the sheet is read from a variable the widget never declares — the default sits in the var() fallback instead. Your rule is then the only declaration there is, so it lands without !important and without a more specific selector than the one below.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

One knob, three steps

--ats-radius is a scale, not a single corner. The sheet draws its panel at 16px, its controls at 10px and its tiles at 8px, and the last two are ratios of the first — so they move together and a squared panel never ends up with rounded tiles rattling around inside it. Each step also has a name of its own, for when you want exactly one of them.

--ats-radius          the whole ladder
--ats-menu-radius     the panel alone
--ats-control-radius  the filter field, the close button, the rows
--ats-tile-radius     the service tiles
--ats-button-radius   the kit buttons alone

Where you set it decides what it reaches

The buttons in a kit read the same scale, at their own 7px default, and so does the quick strip at 12px. On :root the one line squares all three; on .ats_menu, as the demo does, it reaches nothing outside the panel. One exception, and it is the useful one: the shape classes are more specific than the knob, so a kit that asked for a circle stays a circle either way.

:root { --ats-radius: 0; }           /* sheet, strip and buttons */
.ats_menu { --ats-menu-radius: 0; }  /* the panel, and nothing inside it */

Two things stay round on purpose

The drag handle on the phone sheet and the scrollbar thumb are pills — their radius is half their height — and a squared pill reads as a rendering fault rather than as a style, so neither is on the ladder. The toast, the count bubble and the floating bar are not sheet furniture and keep their own corners as well.

Live demo

Demo ↗

An article worth passing on

Press More: the panel, its filter field, its rows and its tiles all go flat together. The buttons in the row above keep their corners, because the variable is set on the sheet.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<style>
.ats_menu {
  --ats-radius: 0;
}
</style>

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

<script async src="//static.addtosite.com/widget.js"></script>

Shape