Styling Jquery UI tabs navigation

Question

Does anyone know how to do this in CSS?

Navigation tab image

This is for the navigation tabs for jQuery UI tabs. I can't get the border-radius to work. Currently, I can do this shape but with no radius on top-left and top-right.

    border-right: 47px solid transparent;   
    border-bottom: 35px solid #415049;
    border-left: 15px solid transparent;    
    -webkit-border-radius: 5px 5px 0 0px;
    -moz-border-radius: 5px 5px 0 0px;
    border-radius: 5px 5px 0 0px;   
    height: 0;  
    background:none;

Any help would be appreciated.

Answer 1

Here is your answer

If you want shape like this use :before :after

I have created fiddle for you

Here is code

HTML

<div><span></span></div>

CSS

div > span {
    background-color: #333333;
    border-radius: 6px;
    display: inline-block;
    height: 50px;
    width: 200px;
}

div {
    display: inline-block;
    height: 43px;
    overflow: hidden;
    padding: 0 106px 0 46px;
    position: relative;
    width:
}
div:after {
    background-color: #333333;
    border-radius: 10px;
    content: " ";
    height: 100px;
    position: absolute;
    right: 44px;
    top: 15px;
    transform: rotate(30deg);
    width: 100px;
}
div:before {
    background-color: #333333;
    border-radius: 8px;
    content: " ";
    height: 50px;
    left: 39px;
    position: absolute;
    top: 6px;
    transform: rotate(15deg);
    width: 50px;
}

Here is fiddle for you http://jsfiddle.net/96sv3/2/

Hope this helps you :)

Answer 2

Oh, man! Been there done that.

You can use background images for the tabs and tab states.

Or; try border radius defining left, right, top, bottom.

EG.

 border-bottom-left-radius:2em;

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-bottom-left-radius