Ajax Rounded Corners Extender on Ajax Tab Panel?

Question

Is there anyway of creating an Ajax Rounded Corners Extender onto an Ajax Tab Panel? Or is there another way using other methods to get rounded corners onto an Ajax Tab Panel?

Thanks. Firstcape

Answer 1

The most simple solution is to add this css class definition (won't not work in old browsers):

.ajax__tab_body{
    -webkit-border-radius: 10px;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius: 10px;
    -moz-border-radius-topleft: 0;
    border-radius: 10px;
    border-top-left-radius: 0;
}

Answer 2

.CustomTabStyle .ajax__tab_active .ajax__tab_outer, .CustomTabStyle .ajax__tab_header .ajax__tab_outer, .CustomTabStyle .ajax__tab_hover .ajax__tab_outer
{
    height: 24px;
    border: 1px solid #0445A6;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.CustomTabStyle .ajax__tab_active .ajax__tab_inner, .CustomTabStyle .ajax__tab_header .ajax__tab_inner, .CustomTabStyle .ajax__tab_hover .ajax__tab_inner
{
    height: 24px;
    border: 1px solid #0445A6;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

Add this CSS style to the stylesheet..

Also add CssClass="CustomTabStyle" to the AJAX TabContainer on the design page..

This works like a charm..