Skip to main content

Corners

The Corners card defines how each corner of the shape is rendered. Per-corner controls apply to 4-vertex shapes (rectangle, diamond, parallelogram, trapezoid) and — partially — to the triangle. Convex/reflex controls apply to polygons (pentagon, hexagon, octagon) and to star, arrow, chevron and cross shapes.

Properties​

PropertyDescriptionDefault
Corner RadiusRadius (px) used for rounded and inward variants. Supports conditional formatting (fx).0
Top LeftCorner type for the top-left vertex (rectangle, parallelogram, trapezoid)Rounded
Top RightCorner type for the top-right vertexRounded
Bottom LeftCorner type for the bottom-left vertexRounded
Bottom RightCorner type for the bottom-right vertexRounded
Convex AnglesCorner type applied to all convex (outward) angles of multi-vertex shapes (star, arrow, chevron, cross, polygons)Rounded
Reflex AnglesCorner type applied to all reflex (inward) anglesRight-angled

Corner types​

TypeDescription
Right-angledSharp corner (no radius applied)
RoundedConvex arc replacing the sharp corner
Right-angled inwardSharp notch cut into the shape
Rounded inwardConcave arc cut into the shape

How the radius is computed​

For corners that are not 90°, the arc radius is calculated from the vertex angle:

R = cornerRadius × tan(θ / 2)

where θ is the angle at the vertex. This ensures consistent visual rounding across all polygon types — a 60° vertex of a triangle and a 120° vertex of a hexagon use the same cornerRadius value but produce visually balanced arcs.

Which controls apply to which shape?​

Shape categoryCorner controls used
Rectangle, Diamond, Parallelogram, TrapezoidTop Left / Top Right / Bottom Left / Bottom Right
TriangleTop Right / Bottom Left / Bottom Right (Top Left is hidden)
Pentagon, Hexagon, OctagonConvex Angles only
Star (5), Star (6), Arrow, Chevron, CrossConvex Angles + Reflex Angles
Circle, Ellipse, Pill, HeartNone (curved paths)