CSS Tool
Visually set corner radius values and watch a live preview update in real time — from subtle card corners to perfect circles. Copy the CSS and drop it straight into your Canvas HTML Template.
Presets
border-radius: 8px;border-radius is a CSS property that rounds the corners of an element’s border box. A value of 0 gives sharp corners; increasing the value creates increasingly rounded corners until you hit a circle at 50% on a square element.
In Bootstrap 5, the .rounded-* utility classes apply border-radius values ranging from .rounded-1 (0.25rem) to .rounded-5 (3rem), plus .rounded-circle and .rounded-pill. When you need a value outside this range, a custom CSS declaration is your best option.
The Canvas HTML Template uses border-radius extensively on cards, buttons, image thumbnails, and team photo blocks. Many components expose a CSS variable like --cnvs-border-radius which you can override globally or per-section with a single line in a <style> block.
The four-value shorthand border-radius: TL TR BR BL lets you create asymmetric shapes — great for organic, modern aesthetics. The squircle preset (30% 70% 70% 30% / 30% 30% 70% 70%) is a popular app-icon style shape that sits between a circle and a square.
Choose Simple mode for uniform corners or Advanced mode to set each corner individually.
Toggle between px (fixed size) and % (relative to element dimensions) units.
Drag the slider(s) and watch the teal preview square morph in real time.
Pick a preset — None, Subtle, Card, Pill, Circle or Squircle — to jump to a common value.
Click Copy CSS to grab the border-radius declaration and paste it into your Canvas template or stylesheet.
| Name | Value | Use Case |
|---|---|---|
| None | 0 | Tables, full-bleed images |
| Subtle | 4px | Input fields, tags |
| Card | 8px – 12px | Bootstrap cards |
| Modal | 16px | Dialogs, panels |
| Pill | 9999px | CTA buttons |
| Circle | 50% | Avatars, icons |
| Squircle | 30% 70% 70% 30% / ... | App icons |
The CSS border-radius property rounds the corners of an element's outer border edge. You can set a uniform radius for all four corners, or specify each corner individually using the shorthand: border-radius: top-left top-right bottom-right bottom-left. It accepts px, %, em, and rem values.
Set border-radius: 50% on an element with equal width and height. For example: width: 80px; height: 80px; border-radius: 50%. This is the standard technique for circular avatars and icon containers in Bootstrap and Canvas HTML templates.
Pixel values (px) create a fixed radius regardless of element size — good for consistent card corners. Percentage values (%) are relative to the element's dimensions — 50% always creates a circle on square elements. For buttons, a fixed px value like 8px maintains consistent corners even when the button size changes, while % can make small buttons look very round.
Use a very large border-radius value like 9999px or 100vw. Because the browser caps the radius at half the element's shortest dimension, any sufficiently large value produces a perfect pill shape. Bootstrap 5 uses .rounded-pill which applies border-radius: 50rem.
The border-radius shorthand accepts up to four values: border-radius: top-left top-right bottom-right bottom-left. For example: border-radius: 12px 4px 12px 4px. You can also use individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
Canvas Builder generates production-ready Canvas HTML Template pages in seconds — with your corner styles, colours and copy already set.
Try Canvas Builder