Setting border radius with an 'em' value.
Question
Hi
I am trying to use grapesjs for a project that needs to scale to the display. I have things like margins and fonts doing it fine but I want to only let the user specify border radius in em units so the they will scale too.
This would required the options for the units in the various border radius inputs to include 'em' as an option. I have managed to change the unit list for font size (removing all but em) but I can't seem to do it for the radius.
Has anyone achieved this already and can share this with me?
thanks
Darren B.
Answers (3)
How do you init/update the Style Manager?
Hi . like this (for the fonts)
editor.on('load', function () {
....
styleManager = editor.StyleManager;
fontSize = styleManager.getProperty('typography', 'font-size');
units = ["em"];
fontSize.set('units', units);
styleManager.render();
....
}
In the above case, I want em as the only size option. I need to do the same with the radius setting as everything needs relative scaling.
thanksOk, if you're updating via API you can do this:
const sm = editor.StyleManager;
// By default configuration, grapesjs has 2 `border-radius` properties, 1 for all sides
// and one of `composite` type with 4 inputs, so `getProperty` will return
// an array with 2 types. I'm selecting the second one as it's a bit more complex
// than the first one (a simple input)
const brProperty = sm.getProperty('decorations', 'border-radius')[1];
// Now you have to update inner properties (`border-top-left-radius`, ...)
brProperty.get('properties').forEach(property => property.set('units', ['em']))
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2814
[QUESTION] Custom panel button that dynamically Enable/Disable user scripts
Hello and thanks for sharing such a good project. I'm trying to customize some things in the editor but I have some questions that I would...
Issue #3409
[QUESTION] Custom component property that is not a trait
I would like to create a custom component with a property that will be updated by specific code, but I don't want this property to be visib...
Issue #3525
FEAT: In Style Manager, Allow Requiring the Default Setting
What are you trying to add to GrapesJS? The CSS property float only makes sense for position: static; elements, which happens to be the def...
Issue #1781
add a font-size type prop
I'm trying to create a font-size type of property that I would like to add to the dimensions sector. Doing this: Getting the value and all,...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Best GrapesJS Plugins in 2025 (Updated List)
Discover the top free and premium GrapesJS plugins in 2025 — boost your editor with UI kits, Tailwind blocks, AI tools, and advanced page managers.
Tutorial
Blocky Plugin — 40+ Ready-Made Tailwind CSS Blocks for GrapesJS
Designed for creators who value both speed and precision, Blocky adds a library of 40+ pre-built Tailwind blocks directly inside your GrapesJS editor.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.