Is it possible to create this shape with Border Radius only?

Question

Consider the following HTML for a tabbed menu:

<ul id="nav-tabs">
    <li class="active">Blah</li>
    <li>tab 2</li>
    <li>tab 3</li>
    <li>tab 4</li>
    <li>tab 5</li>
</ul>

Not sure if this is doable, but I want to get the shape of the tabs to look like this with border-radius. no images. The top part is easy, but the bottom, how it curves out on the line is the part I don't know if it's possible:

enter image description here

Here's the jsfiddle

Very cool Joseph. If you want to put that as an answer i'll accept it. — Sammy
– Sammy, Commented Aug 10, 2012 at 18:14

Joseph Silber · Accepted Answer · 2012-08-10 18:18:09Z

2

Posting comment as answer...

Chris Coyier has an article addressing this: Tabs with Round Out Borders.

His implementation is a little different than yours, but by playing with the border-radius you should be able to get the effect closer to what you have in your image, though I doubt you'll be able to get the shadow working (if you prove me wrong, post your code here. Would be very interesting).

answered Aug 10, 2012 at 18:18

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to create this shape with Border Radius only?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related