Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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:
Here’s the jsfiddle
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-radiusyou 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).