CornerRadius add superellipse support
- 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
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