Intro

A few years ago, when I learned border-radius, I felt very fulfilled. It could make my HTML elements beautiful. And then I became confused: “How to organize the size of the border-radius?”. This question followed me for a long time.

The method I used to design

Later, I began to learn from the design styles of other websites. At that time, I liked designing a component like this: Set a 15px border-radius and a 15px padding for the parent as a container, and then set 10px border-radius with 10px for the child as content. If the ratios look not well, adjust it in the DevTools and use the best value...

When our pages become complex, this approach will be cumbersome, sometimes I have to make many modifications to get the desired style.

Golden Ratio to organize border-radius

I have always wanted a method to establish the size of border-radius for different containers. Someday I realized that I could use a ratio to organize the border-radius between parent and child elements. So I tried the Golden Ratio:

1. For a known element has a border-radius N
2. Set its children's border-radius with N × 0.618.
3. You could use Math.round to convert it to an integer, this will look neat.

I think that’s a useful skill, when you design the border-radius in this way, your component could be beautiful!~

Ending

I was so excited when found this rule and I’m very glad sharing this to you. Thank you for reading my article!🙌