Skip to main content
Version: 2.0.0-preview

Rounded rectangle

Draws a rectangle with each corner rounded according to the corner radius. Increasing Smoothing bends the corners toward an iOS-style squircle (superellipse) for a softer look.

Library location​

Library → Rounded rectangle

Properties​

Width​

Rectangle width in pixels.

  • Type: float
  • Default: 100
  • Animatable: Yes
  • Range: [0, ∞)

Height​

Rectangle height in pixels.

  • Type: float
  • Default: 100
  • Animatable: Yes
  • Range: [0, ∞)

Corner Radius (CornerRadius)​

Per-corner radius (TopLeft / TopRight / BottomRight / BottomLeft).

  • Type: CornerRadius
  • Default: new(25)
  • Animatable: Yes
  • Range: [0, ∞)

Smoothing​

0 = circular arc corners, 100 = fully smoothed (squircle).

  • Type: float
  • Default: 0
  • Animatable: Yes
  • Range: [0, 100]

Common properties​

This object inherits from Shape and exposes the common properties declared on its base classes.

Usage​

Use for buttons, cards, and chips. Set the corner radii independently for asymmetric rounding, and increase Smoothing for a softer transition between the curve and the straight edge.

Source​

src/Beutl.Engine/Graphics/Shapes/RoundedRectShape.cs