Smoothing Rounded Corners

Rounded corners can look subtly different across platforms. ToDesktop Builder uses Electron for its desktop apps, so it supports the -electron-corner-smoothing CSS rule to smooth the curve produced by border-radius, similar to macOS "continuous" corners and Figma's corner smoothing control. This affects the shape of borders, outlines, and shadows on the element.

# Match the system UI

Use system-ui to match the OS design language:

        html.todesktop .card {
  border-radius: 16px;
  -electron-corner-smoothing: system-ui;
}

      

# Set a custom smoothness

You can set a custom percentage between 0% and 100% (0% is the default):

        html.todesktop .panel {
  border-radius: 24px;
  -electron-corner-smoothing: 60%;
}

      

Like border-radius, smoothing will back off if the element is too small for the chosen value.

# Details

• Values: 0% to 100% or system-ui.
• Default: 0%.
• Not inherited and not animatable.