Modifying Jquery-ui tab layout for tab button

Question

I'm using jquery-ui tabs to create a page with a menu. I decided to have a graphic like below for my website

But ends up to this:

As you can see I can not fulfill my wishes. There are something that I can not modify on jquery-ui, at least I don't know how to resolve it. Because styling applies to all materials I could not change first and last ul>li. I explicit it in below picture:

I added my script to jsfiddle for showing what I have done. http://jsfiddle.net/fad6d85o/

Now My two certain questions are listed below: 1- how to apply different css to first and last ul>li? 2- How can I define for example width:25% for ul>li>a links? I want to define container width:800px and then set width: 100/n % for ul>li>a links.

.ui-widget-content a {
    color: #333333;
    padding: 60px;
    line-height: 4.3em;
}

I have done above changes but it's not nice when a string is long and another one is short. it would not be as size as each other.

Answer 1

add this to your css:-

.ui-tabs-nav  li:last-child
 {
   border-radius:4px 0px 0px 4px;
 }
 .ui-tabs-nav  li:first-child
 {
  border-radius:0px 4px 4px 0px;
 }

Demo

Answer 2

Please Check the fiddle

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
</div>

I guess this is what you are looking for as far as i understood your question. Please mark me correct if i am correct or if some more issues are there i am ready to help out. Cheers......