emilk / emilk/egui

CornerRadius add superellipse support

Open
#7,629 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
Rust
Stars
30.6k
Forks
2.1k
Avg merge
1d 9h
Merged PRs (30d)
72

Description

**Is your feature request related to a problem? Please describe.**

Currently, `egui`'s `CornerRadius` only supports standard circular corners. This is sufficient for many UIs, but it limits the ability to create more modern or stylized aesthetics. For example, "squircles" (superellipses) are increasingly common in UI design (e.g., on Apple platforms) and offer a visually softer and more continuous shape than a simple circle. Developers who want to achieve these shapes currently have to implement custom drawing logic, which is complex and doesn't integrate seamlessly with standard widgets like `Button`.

**Describe the solution you'd like**

I propose adding support for superelliptical corners, following the model of the CSS `corner-shape` property. This would provide developers with much greater control over the visual style of their widgets.

My suggestion is to introduce a new `CornerShape` enum that could be applied to widgets. For instance, the `Button` widget could be modified like this:

```rust
// In crates/egui/src/widgets/button.rs
pub struct Button<'a> {
// ... existing fields
corner_shape: Option,
}
```

The `CornerShape` enum itself could be defined as:

```rust
pub enum CornerShape {
/// Standard circular corner (current behavior)
Round,
/// A superellipse with a given exponent.
/// superellipse(1.0) is equivalent to Round.
/// superellipse(2.0) is a squircle.
/// superellipse(0.0) is a bevel.
/// superellipse(infinity) is a square.
Superellipse(f32),
}
```
This could also be integrated into the existing `CornerRadius` or `epaint::Shape` system to make it universally available for all relevant widgets.

This change would be aligned with web standards, where `superellipse(1)` is equivalent to the default rounded corner.[[2](https://www.google.com/url?sa=E&q=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2Fsuperellipse)] This would make the new feature a non-breaking, backward-compatible addition.

**Describe alternatives you've considered**

The primary alternative is for developers to create their own custom widgets with manually drawn paths using a `Painter`. While this is possible, it is not ideal because:
1. It requires a lot of boilerplate code for a common styling need.
2. It's difficult to ensure it integrates correctly with all of `egui`'s features (e.g., borders, shadows, interactions).
3. It makes it harder for the community to share a consistent styling language.

By building this into the core library, `egui` would become much more flexible and powerful out-of-the-box.

**Additional context**

Here are the web standard documents for reference:
- `corner-shape`: https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape
- `superellipse()`: https://developer.mozilla.org/en-US/docs/Web/CSS/superellipse

Relevant source code files:
- `corner_radius_f32.rs`: https://github.com/emilk/egui/blob/main/crates/epaint/src/corner_radius_f32.rs
- `button.rs`: https://github.com/emilk/egui/blob/main/crates/egui/src/widgets/button.rs#L52

Adding this feature would significantly enhance `egui`'s capability for modern UI design and custom styling. Thank you for considering it.

Contributor guide

Open the contributing guide

Research direction

Start by reading crates/epaint/src/corner_radius_f32.rs and crates/egui/src/widgets/button.rs to understand the existing corner-radius and button APIs. Trace how corner geometry is used by epaint shapes and relevant widgets, then determine the scope of a consistent superellipse API. Done means the design is agreed, the feature works with standard widgets, and existing circular corners remain compatible.

Written by the indexing model from the issue text.

Assessment

Tech stack
rust
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.