Rectangles are the most versatile shape in Azyrom. Use them for buttons, cards, containers, backgrounds, and much more. Master corner radius controls for pixel-perfect rounded rectangles.
Creating Rectangles
Activate the Rectangle tool
Press R or select the rectangle icon from the shape tools in the toolbar.
Click and drag
Click on the canvas and drag to create a rectangle. Release to finish.
Adjust size
Use the Properties Panel to set exact dimensions, or drag the corner handles.
Drawing Modifiers
| Modifier | Effect |
|---|---|
Shift |
Constrain to perfect square |
Alt/Option |
Draw from center instead of corner |
Shift + Alt |
Draw square from center |
Corner Radius
Round the corners of any rectangle using corner radius controls.
Setting Corner Radius
- Properties Panel - Enter a value in the corner radius field
- Visual handles - Drag the circular handles that appear inside corners when selected
- Keyboard - Use
⌘/Ctrl + ]to increase and⌘/Ctrl + [to decrease
Corner Radius Handles
When you select a rectangle or frame, small circular handles appear inside each corner. These handles provide a visual, intuitive way to adjust corner radius—just like in Figma.
- Small circles - The draggable handles positioned at each corner
- Arc indicators - Small curved arcs near each handle showing the rounding direction
- Radius tooltip - A blue tooltip showing "Radius X" appears while dragging
Select a rectangle
Click on any rectangle or frame to select it. You'll see corner radius handles appear inside each corner.
Drag a handle
Click and drag any corner handle toward the center to increase the radius. A tooltip displays the current value.
Release to apply
All four corners update uniformly. The maximum radius is half the smaller dimension of the shape.
Independent Corner Radii
Each corner can have a different radius:
- Select the rectangle
- Hold
Alt/Optionwhile dragging a corner radius handle - Only that corner will be adjusted—others remain unchanged
You can also use the Properties Panel: click the chain link icon to unlink corners, then enter different values for each corner (top-left, top-right, bottom-right, bottom-left).
The corner radius handles move as you drag them—they're always positioned at the current radius distance from each corner. When radius is 0, handles appear at a small default offset so they remain visible and grabbable.
Smooth Corners vs. Circular Corners
Azyrom supports two corner styles:
- Circular - Traditional CSS-style border-radius (quarter circles)
- Smooth - iOS-style "squircle" corners with continuous curvature
Toggle between styles in the Properties Panel corner section. Smooth corners look more natural and are preferred for modern UI design.
Rectangle Properties
Position & Size
- X, Y - Position on canvas
- W, H - Width and height
- Rotation - Angle in degrees
- Lock aspect ratio - Click the chain icon to constrain proportions
Fill
Add solid colors, gradients, or images as fills. Multiple fills can be stacked.
Stroke
Add outlines with customizable width, color, and style (solid, dashed, dotted).
Effects
Apply drop shadows, inner shadows, and blur effects.
Common Use Cases
Buttons
Create buttons with rounded corners (typically 4-8px radius), add a fill color, and place text inside.
Cards
Use larger corner radii (8-16px) with subtle shadows for card components.
Input Fields
Combine rectangles with text elements. Use stroke instead of fill for outlined input styles.
Containers & Frames
Large rectangles with no fill or very subtle fills work as layout containers.
To create a pill-shaped button, set the corner radius to half the rectangle's height. For a 40px tall button, use 20px corner radius.
Converting to Path
For more control, convert a rectangle to an editable path:
- Select the rectangle
- Choose Object → Convert to Path (or
⌘/Ctrl + Shift + O) - Edit individual anchor points with the Pen tool
Note: Once converted, you can no longer use the corner radius controls. The corners become fixed bezier curves.