{"id":6235,"date":"2025-06-18T12:05:26","date_gmt":"2025-06-18T17:05:26","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6235"},"modified":"2025-06-18T20:39:31","modified_gmt":"2025-06-19T01:39:31","slug":"drawing-css-shapes-using-corner-shape","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/drawing-css-shapes-using-corner-shape\/","title":{"rendered":"Drawing CSS Shapes using corner-shape"},"content":{"rendered":"\n

We recently got the new\u00a0shape()<\/code>\u00a0function<\/a> for\u00a0clip-path<\/code>\u00a0which is a game changer for creating CSS shape. Another cool feature is on the way and will soon be available: corner-shape<\/code>.<\/p>\n\n\n\n

I will not call it \u201cnew\u201d because it\u2019s something that has been around for quite a while and you can find countless GitHub discussions around it. There is even an 11-year old Github Repo made by Lea Verou<\/a> with an interactive demo showing a few examples! After all that time, It finally has its own specification<\/a> and is ready to be implemented and shipped.<\/p>\n\n\n\n

At the time of writing, corner-shape<\/code> is available in Chrome v139<\/a> or 136+ with the experimental web features flag turned on, but no other browsers yet.<\/p>\n\n\n\n

What is corner-shape?<\/h2>\n\n\n\n

When you define a border-radius<\/code> you will get rounded corners. corner-shape<\/code> allows you to change those rounded corners to something else. It\u2019s in the name; it changes the \u201cshape\u201d of the \u201ccorner\u201d.<\/p>\n\n\n

\n
\"A<\/figure>\n<\/div>\n\n\n

The value round<\/code> is the default (the classic rounded corners). As you can see above, we have many cool variations. All of this with a simple syntax:<\/p>\n\n\n

.corner<\/span> {\n  border-radius<\/span>: 30px<\/span>;\n  corner-shape<\/span>: round | scoop | bevel | notch | squircle;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
\"Diagram<\/figure>\n<\/div>\n\n\n
Let\u2019s Draw Shapes<\/h2>\n\n\n\n
Changing the corner shape is good \u2014 but how can we draw shapes<\/em>? The answer is to play with border-radius<\/code>. Follow along to see all the magic we can do with corner-shape<\/code>!<\/p>\n\n\n\n
Rhombus & Octagon<\/h3>\n\n\n\n
If you look closely at the example using the bevel<\/code> value, you will see that we have 8 sides since the corners are diagonal straight lines so we almost have an octagon shape. We simply need to find the exact value for border-radius<\/code> that gives us 8 equal sides.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
I will skip the boring math and give you the final value which is:<\/p>\n\n\n
border-radius<\/span>: calc<\/span>(100%\/(2 + sqrt<\/span>(2)));<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Even without being precise, you can approximate the value using trial & error. You will get an octagon when you are close to 29%<\/code>. The usage of percentage is important because it means the shape is responsive and let\u2019s not forget aspect-ratio: 1<\/code> as well.<\/p>\n\n\n
.octagon<\/span> {\n  border-radius<\/span>: calc<\/span>(100%<\/span>\/(2<\/span> + sqrt(2<\/span>)));\n  corner-shape<\/span>: bevel;\n  aspect-ratio<\/span>: 1<\/span>;\n} <\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Now what if we keep increasing the radius? We get a Rhombus shape at 50%<\/code>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n
.rhombus<\/span> {\n  border-radius<\/span>: 50%<\/span>;\n  corner-shape<\/span>: bevel;\n  aspect-ratio<\/span>: 1<\/span>;\n} <\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
We can also use the superellipse(K)<\/code> value that can define all the different variations and more by adjusting the K<\/code> variable. I will not detail that part as it\u2019s not important for the article but it\u2019s good to know so I invite you to check the (draft) specification<\/a> for more detail.<\/p>\n\n\n