Skip to main content
RoundedRectangle(props: { cornerRadius?: number }): Shape;

​
Parameters

​
props
{ cornerRadius?: number }
Configuration for the rounded rectangle.

​
Support

​
Usage

​
Default rounded corners

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

​
Custom corner radius

RoundedRectangle({ cornerRadius: 20 })
    .fill(Color("green"))
    .frame({ width: 150, height: 150 })

​
Rounded rectangle with stroke

RoundedRectangle({ cornerRadius: 12 })
    .stroke({ style: Color("red"), lineWidth: 3 })
    .frame({ width: 180, height: 80 })

​
Card-like appearance

RoundedRectangle({ cornerRadius: 16 })
    .fill(Color("white"))
    .shadow({ radius: 8, x: 0, y: 4 })
    .frame({ width: 300, height: 200 })

​
Highly rounded rectangle

RoundedRectangle({ cornerRadius: 50 })
    .fill(LinearGradient({
        colors: [Color("yellow"), Color("orange")]
    }))
    .frame({ width: 100, height: 100 })