Comments on: Modern CSS Round-Out Tabs https://frontendmasters.com/blog/modern-css-round-out-tabs/ Helping Your Journey to Senior Developer Mon, 13 Oct 2025 19:55:33 +0000 hourly 1 https://wordpress.org/?v=6.8.3 By: Temani Afif https://frontendmasters.com/blog/modern-css-round-out-tabs/#comment-43783 Mon, 13 Oct 2025 19:55:33 +0000 https://frontendmasters.com/blog/?p=7381#comment-43783 I see you are using the “to” directive but we can also rely on the “by” directive to optimize the code a little.

We can also rely on “arc” to create the same shape

Here is a demo with both versions: https://codepen.io/t_afif/pen/LEEwGJa

And the articles where I detail everything:
– the arc version: https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/
– the curve version : https://css-tricks.com/better-css-shapes-using-shape-part-3-curves/

]]> By: Ana Tudor https://frontendmasters.com/blog/modern-css-round-out-tabs/#comment-43773 Mon, 13 Oct 2025 17:54:27 +0000 https://frontendmasters.com/blog/?p=7381#comment-43773 Regarding accessibility: I made this tabs demo (also with rounded corners and borders as well, though using SVG filters) https://codepen.io/thebabydino/pen/oNKLLbv a little over a year ago following that ARIA Authoring Practices Guide… which does come with a disclaimer at the very top. Anyway, I made keyboard navigation work according to the guide. I’m no expert either, so if anyone who knows better has any suggestions for improvement, I’m listening.

]]>