Infragistics UltraWebTab control offers multiple styling options, many of them can be set via external CSS classes. As a matter of fact about only element you cannot style via external stylesheet is rounded corner images. Or can you?

By default images used to give the tabs rounded-corner look are referenced directly in UltraWebTab ASPX markup:

<RoundedImage
   SelectedImage="./images/ig_tab_selected.jpg"
   NormalImage="./images/ig_tab_normal.gif"
   HoverImage="./images/ig_tab_hover.jpg"
   FillStyle="LeftMergedWithCenter">
</RoundedImage>

So, for example if SelectedImage looks like this:

It will give your tab appearance like this

Let’s examine it closer. If your look in browser at rendered HTML of this tab it looks like this (I’ve removed some attributes to simplify view):

<TD class=xuwtHome_2>My Test Tab</TD>
<TD width="5" class=xuwtHome_2R>&nbsp;</TD>

Where

.xuwtHome_2 {
   BACKGROUND: url(./images/ig_tab_selected.jpg) no-repeat left top;
}

.xuwtHome_2R {
   BACKGROUND: url(./images/ig_tab_selected.jpg) no-repeat right top;
}

So in reality tab consists of 2 TD elements: First one, on the left, takes the left part of the image as a background; Second on the right – small “rounded” part from the right part of the image (in this case 5 pixels, see TD‘s WIDTH atribute)

Knowing this we can now model our CSS class to reference and render rounder corner image:

.TabStyleSelected /* Style of left TD. Add font and other styles for tab title */
{
   background-image: url("./images/ig_tab_selected.jpg") !important;
}

.TabStyleSelected + td /* Style of right TD. Width from width of right rounded part */
{
   background-image: url("./images/ig_tab_selected.jpg") !important;	
   width:5px !important;
}

Note “+” CSS selector on Line 6. It tells browser to apply this style to next sibling TD element (in our case right TD) of the element to which original style is applied (in our case left TD element). Also note “width” attribute on Line 9. It is the width of right “rounded” part of the image. If your image is different and rounded part takes more/less – adjust this value accordingly.

After the style is set like this it just a matter of assigning class to tab element(s). If you want to make this style default for all tabs – use SelectedTabStyle element:

<SelectedTabStyle CssClass="TabStyleSelected"/>

If you want to apply separate round corner styles to individual tabs (which was not possible originally with round corner images set in stone set in ASPX markup) you can do that as well:

<igtab:Tab>
   <SelectedStyle CssClass="TabStyleSelected" />
</igtab:Tab>

Or even do it programmaticaly

oTabControl.SelectedStyle.CssClass = "TabStyleSelected"

Similar approach can be used to define “normal” and hover tab styles and if you need to change rounded styles (either globally, or per tab) no need to change ASPX markup, no need to rename original images or paste your images over original, just create new images and reference them in the stylesheet.