[css-env] border radius

[mantou132]

In some operating systems (such as macOS), the browser has a rounded corner of the border. When the page content sets the border, need to adapt this rounded corner

Proposal

Add safe-border-top-left-radius, safe-border-top-right-radius, safe-border-bottom-right-radius, safe-border-bottom-left-radius environment variables.

Example

body {
  border: 10px solid red;
  border-bottom-left-radius: env(safe-border-bottom-left-radius, 0);
  border-bottom-right-radius: env(safe-border-bottom-right-radius, 0);
}

[Loirooriol]

Why not safe-area-inset-*? https://drafts.csswg.org/css-env-1/#safe-area-insets

[mantou132]

Why not safe-area-inset-*? https://drafts.csswg.org/css-env-1/#safe-area-insets

The purpose is to create the same effect as the figure below, obviously safe-area-inset-* is not.

[Loirooriol]

No, not "obviously", otherwise I wouldn't be suggesting it. I don't have macOS to test but IMO something like this should work:

border-radius:
  env(safe-area-inset-left) env(safe-area-inset-right) env(safe-area-inset-right) env(safe-area-inset-left) /
  env(safe-area-inset-top) env(safe-area-inset-top) env(safe-area-inset-bottom) env(safe-area-inset-bottom);

[7freaks-otte]

The problem with your solution @Loirooriol is, that the safe are also accounts for the notch on iPhones and similar camera holes on other devices. So the resulting rounded border will not match the visible screen area and browser view bounds

[Loirooriol]

Fair enough, I want thinking about phones. But with the notch, I guess that the border will look bad no matter what you do, unless you know the exact shape of the notch and use a SVG path or something.

[7freaks-otte]

Still no solution 4 years later... Really waiting for something like this.

@Loirooriol Yes, outlining the notch or current "Dynamic Island" thingies would look bad for sure unless we could somehow detect the exact shape, but this is where the current available safe area steps in: You would just make sure that no important elements like buttons are within the safe area.

For the viewport radius just imagine swiping away a view to reveal the previous view or a side menu of a PWA on your mobile phone. Until now the view swiped away suddenly gets rectangular and would look much better if it could retain its rounded form.

[AtkinsSJ]

In case a border radius is elliptical, this should probably expose both horizontal and vertical radii of each corner.