Design tools pages
Offer visitors a quick corner shaper.
Content / widget · Elementor module
CSS Border Radius Generator Widget Plugin for Elementor
Let visitors shape a box’s corners with sliders, presets and elliptical corners, see it live and copy the shortest border-radius CSS.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / CSS border radius generatorProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Try it
These are the actual published widgets running in your browser; change the corners to see the shape update.
02 / Inside WordPress
CSS border radius generator controls in Elementor
Corners sets the starting values and unit, preset shapes, the slider maximum, whether visitors can edit and live updates. Labels sets the heading, the corners and unit labels and every button and message. The Style tab covers the layout, the shape colour and height, fields, CSS panel and buttons.
03 / Website use cases
Where to use css border radius generator
border-radius shorthand is easy to get wrong: which value is which corner, when to use three values, and how the slash makes elliptical corners. CSS border radius generator shows the shape as each corner changes and writes the shortest correct CSS, from a simple rounded card to an organic blob.
Style guides
Show the card and button radii with their CSS.
Learning CSS
See which value controls which corner.
04 / Installation and setup
How to add a border radius generator in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable CSS border radius generator in the Complementor library.
Add the widget to a design tools or style guide page.
Set the starting corners, such as 24 24 4 24, and the unit.
Keep the presets for quick shapes, or turn editing off to present a ready shape.
Style the shape and panel, then copy the CSS to check.
05 / Content and style controls
Customize css border radius generator in Elementor
Configure the settings available for this module to suit the page you are building.
Four corners with a slider and a number each, in CSS order.
Same value for all corners in one move.
Elliptical corners with separate heights, written with /.
Units px, %, rem and em, converting values when switched.
Presets: square, rounded, pill, circle, leaf and blob.
The shortest shorthand with one to four values.
Copy CSS, and an option to show a ready shape without editing.
06 / Choose the right approach
CSS border radius generator and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Elementor border radius control
Rounds your own elements; this widget gives visitors the CSS.
CSS gradient generator
Builds gradients the same way.
07 / Requirements and compatibility
CSS border radius generator compatibility with Elementor
- Requires Elementor.
- border-radius only.
- Runs in the visitor’s browser.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot css border radius generator
Check these settings if the published page behaves differently from the editor.
Why does the CSS have fewer values than corners?
Matching corners are merged into the shortest shorthand, which browsers read the same way.
Why does the pill use 999px?
Any radius larger than half the height makes fully round ends; 999px works for any height.
Why do the values change when I switch units?
They are converted, px to rem at 16px per rem, so the shape stays the same; per cent is capped at 50.
What does the / mean?
Values after it are the vertical radii, which make elliptical corners.
CSS border radius generator plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Is anything sent to a server?
No. Everything runs in the visitor’s browser.
Can I use it with the keyboard?
Yes. Every corner has a labelled number field; the sliders are an extra for the mouse.
Which corner is first?
Top left, then top right, bottom right and bottom left, as CSS expects.
Can I just show a shape?
Yes. Turn off Let visitors edit the corners.
10 / Annual All Access subscription
Get css border radius generator with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.