[Solved] what does “/” mean in css border-radius property? [duplicate]

Question

The / is used to separate the values of the horizontal and vertical radii.

Paraphrasing from W3C: Values before the slash will set the horizontal radius and values after the slash will set the vertical radius. If no radius is given, then both radii will be equal.

To give an idea of how the horizontal and vertical radii work, you can draw a quarter of a circle on the relevant corner (such as the top-left corner). If you set the border-radiusto: border-radius:1000px 0 0 0 /90px 0 0 0;, the horizontal radius will stretch by 1000px and thus stretch the curve of the top-left corner by 1000px to the right. The vertical radius will stretch by 90px and thus the curve of the top-left corner will stretch 90px downward.

You can check out this article for another explaination.

Accepted Answer

The / is used to separate the values of the horizontal and vertical radii.

Paraphrasing from W3C: Values before the slash will set the horizontal radius and values after the slash will set the vertical radius. If no radius is given, then both radii will be equal.

To give an idea of how the horizontal and vertical radii work, you can draw a quarter of a circle on the relevant corner (such as the top-left corner). If you set the border-radiusto: border-radius:1000px 0 0 0 /90px 0 0 0;, the horizontal radius will stretch by 1000px and thus stretch the curve of the top-left corner by 1000px to the right. The vertical radius will stretch by 90px and thus the curve of the top-left corner will stretch 90px downward.

You can check out this article for another explaination.