Skip to main content
Question

How to apply a rounding value to only some custom shapes


Forum|alt.badge.img+3

Hi,

Is there a way to apply a rounding value to a shape or sub-shape but not to all shapes in a custom shape?

When I test it, rounding works in the root style{rounding 10} but not in shapes[{styles {rounding 10}}].

If not possible, how can I create a rectangle with rounded corners?

Thanks for your help,

NM

Did this topic help you find an answer to your question?

Humas1985
Lucid Legend Level 9
Forum|alt.badge.img+21
  • Lucid Legend Level 9
  • March 21, 2025

Hi ​@NMN 

The key is that you can apply specific styles to individual shapes or sub-shapes, including rounding, without affecting the entire root shape. 

You can apply rounding to specific parts of a custom shape, like using path shapes or controlling individual shape styles.

Refer this thread to learn more - Rounding a rectangle and setting it to no fill in Lucidchart | Community

Hope this helps - Happy to help further!!
Thank you very much and have a great one!
Warm regards


Forum|alt.badge.img+3
  • March 27, 2025

Hi Huma,

Thanks for your answer.

Could you provide a small working JSON example?

When I try it, rounding only works when applied to the root shape.

Maybe I’m missing something, but I can’t figure it out.

Thanks for your help,

Nicolas


Richard U
Forum|alt.badge.img+8
  • Lucid support team
  • March 27, 2025

Hi ​@NMN , you might find this example helpful: GroupedShape.shape from our example-shape-library repo. It shows an example of styling with sub-shapes specifically. 

Hope that helps! Let us know if you get stuck or have any further questions.


Humas1985
Lucid Legend Level 9
Forum|alt.badge.img+21
  • Lucid Legend Level 9
  • March 27, 2025

Hi ​@NMN 

You are right, that styles rounding works at the root level in a custom shape. besides, you can still create sub-shapes with rounded corners by using a path instead of a basic rectangle.

Best Regards


Forum|alt.badge.img+3
  • March 27, 2025

Thank you for your answers.

I’ve tried using the path type. See the example below. However, when you resize the shape, you lose the roundness.

{
    "geometry": [
        {
            "type": "path"
            "path": "M 0.1,0 h 0.8 a 0.1,0.1 0 0 1 0.1,0.1 v 0.8 a 0.1,0.1 0 0 1 -0.1,0.1 h -0.8 a 0.1,0.1 0 0 1 -0.1,-0.1 v -0.8 a 0.1,0.1 0 0 1 0.1,-0.1 z"
        }
    ]
}

 

 


Reply