CSS border-radius direction

Question

I have a request to make these menu items:

Top menu:

Side menu:

I started with a border-radius, but I don't know how to make the other side to be 'outer radiuses', I believe both the top and bottom menu are mainly the same idea, I'll just have to play with the sizes and directions.

I'll soon share a jsFiddle of a version I'm working on, currently I haven't manage to do anything at all.

Answer 1

Essentially you want to use the :before and :after selectors to create a little box with a border radius in the corners you want.

There are many examples online, here are a few:

• Making Outer Border Radius Using CSS and CSS3
• CSS3 - Tabs with inner and outer radii - no graphics - (free for personal use - not commercial)
• Flared Borders with CSS