Skip to main content
RoundedRectangle(props?: { cornerRadius?: number }): Shape;
​
props
object
Configuration options for the rounded rectangle.

​
Methods

​
.fill(style)
(style: Style) => Shape
Fills the rounded rectangle interior with a color, gradient, or other style.
​
.stroke(style)
(style: Style | StrokeOptions) => Shape
Draws the rounded rectangle outline. Pass a Style for a 1-point stroke, or a StrokeOptions object ({ style: Style, lineWidth?: number }) for custom width.

​
Support

​
Usage

​
Basic rounded rectangle

RoundedRectangle({ cornerRadius: 12 })
    .fill(Color("blue"))
    .frame({ width: 200, height: 100 })

​
Stroked rounded rectangle

RoundedRectangle({ cornerRadius: 8 })
    .stroke(Color("gray"), 2)
    .frame({ width: 160, height: 80 })

​
Card background

VStack({ spacing: 12 }, [
    Text("Card Title").font("headline"),
    Text("Card description goes here.")
])
    .padding(16)
    .background(
        RoundedRectangle({ cornerRadius: 16 })
            .fill(Color("secondarySystemBackground"))
    )

​
With gradient fill

RoundedRectangle({ cornerRadius: 20 })
    .fill(LinearGradient({
        colors: [Color("purple"), Color("blue")]
    }))
    .frame({ width: 240, height: 120 })

​
As a clip shape

Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 150 })
    .clipShape(RoundedRectangle({ cornerRadius: 12 }))

​
Notes

  • For fully rounded ends (pill shape), use Capsule instead of computing the corner radius manually.
  • RoundedRectangle can also be used with .clipShape() and .contentShape() modifiers.

​
See Also