Removing tab container

[Gabriel]

How does one go about removing the outer container that houses a tab control. I don't want it but don't know the right CSS property to change?

By 'container', I mean the gray box with square corners like: http://demos.kendoui.com/web/tabstrip/api.html 

Also, I'm trying to remove the left, right and bottom border from a selected tab (the border around the content housed within tab)

[Dimo]

Hello Gabriel,

Please use the following CSS rules to override the default TabStrip wrapper styles:

div.k-tabstrip
{
    background: none transparent;
    border-width: 0;
}

div.k-tabstrip .k-tabstrip-items
{
    padding: 0;
}

div.k-tabstrip .k-content
{
    margin: 0;
}

Greetings,
Dimo
the Telerik team

[Gabriel]

Thanks.

[Gabriel]

The answer you gave Dimo worked perfectly but I would like to go even further and remove the inner tab containers. The image here: http://imgur.com/4NX7J shows what I'm referring too.

The top image is current, the bottom is what I'd like.

[Dimo]

Hello Gabriel,

You can use:

div.k-tabstrip  .k-content
{
         border-width: 1px 0 0;
}

These customizations can easily be implemented if you inspect the TabStrip HTML output with Firebug and see which CSS rule is responsible for a given style. Then use a similar CSS rule (with higher specificity, e.g. add a "div" to the selector) to override it.

All the best,
Dimo
the Telerik team

[Gabriel]

Thanks again Dimo - perfect.

[Nathan]

This no longer works.  As soon as you change tabs, the box comes back.

[Nathan]

Never mind, I worked it out:

div.k-tabstrip:focus {box-shadow: none;}