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