I know how to do simple border radius's in CSS3, but i want to have a border radius instead another border radius with out it looking weird. Its similar to the effect you get when you use the "stroke" tool in photoshop.

Any ideas on how i would set the CSS up to do this?

CSS Code:

#tabs {
    list-style: none;
    display: block;
    margin-top: 20px;
    font-size: 11px;
}

#tabs li.application_info, #tabs li.application_info a {
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    -webkit-border-radius-topleft: 3px;
    -webkit-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

#tabs li.application_info {
    margin: 0 5px 0 0;
    border: 1px solid #1d489f;
    border-bottom: none;
    }
#tabs li.application_info a {
    border: 1px solid #2f6cc1;    
    border-bottom: none;
    background: #FFFFFF;
}
#tabs li
{
    display: block;
    float: left;
    margin: 0 2px -1px 0;
    text-align: center;
}

#tabs li a
{
    display: block;
    padding: 5px 10px 5px 10px;
    background: #ffffff url('../../images/shortcut/bg_shortcut.png') repeat-x center;
    -moz-border-radius-top: 3px;
    -webkit-border-radius-top: 3px;
    border-radius: 5px;
    border: 1px solid #cdcdcd;
    color: #393839;
    text-shadow:0 1px 0 #ffffff;
}

HTML Code:

            <div id="tab_menu">
            <ul id="tabs">
                <li class="application_info"><span><a href="#">File</a></span></li>
                <li class="current"><span><a href="#">Home</a></span></li>
                <li><a href="#">Insert</a></li>
                <li><a href="#">Page Layout</a></li>
            </ul>
            
            </div>

Originally Posted by evans123

I know how to do simple border radius's in CSS3, but i want to have a border radius instead another border radius with out it looking weird. Its similar to the effect you get when you use the "stroke" tool in photoshop.

not really sure what you mean here. Do you mean you want round corners INSIDE round corners without them looking odd?

Yeah that's what i want.

Have you tried border-style: double; ?

Can you use two colors doing that?

Nope.

To get a double border with different colurs requires overlayed elements

at uni we learnt the equation for working out nested round borders. I can't for the life of me remember what it is.

The inside border is obviously going to need to be smaller, have a play around, it also depends on the distance between the two borders.

Try 3px out side 2 inside and go from there.