Removing the border of RadSplitter panes and the RadSplitter

HOW-TO
Remove the border of RadSplitter panes and the RadSplitter.





DESCRIPTION

By default, the RadSplitter pane control, as well as the RadSplitter, displays borders to mark its boundaries. However, on numerous occasions, you may want to remove this border to only take advantage of the split functionality the panes offer, without making the user aware of their presence. This effect can easily be achieved by modifying the CSS file of the skin you are using. 
This KB article will demonstrate how you can remove the border of the RadPane objects and the RadSplitter itself on your page.  

SOLUTION

The first step of removing the border of either the RadSplitter panes or the RadSplitter is common to the two procedures, and that is to set the Skin property of the RadSplitter instance to the skin of your choice.  

1. Regarding the RadSplitter pane objects:
   Modify the .pane and .paneHorizontal classes, defined in the CSS file of your skin in the following manner:
   
   

   .RadSplitter_[Your_skin_name] .pane,

   .RadSplitter_[Your_skin_name] .paneHorizontal

   {

   border: 0px ... ;

   }

   and then set the PanesBorderSize property of the RadSplitter object to "0"
2. Regarding the RadSplitter object:
   First modify the RadSplitter_[Your_skin_name] class, defined in the CSS file of your skin in the following manner:

   .RadSplitter_[Your_skin_name]

   {

   border: 0px ... ;

   }

   and then set the BorderSize property of the RadSplitter object to "0"

You can also modify a single border at a time, e.g:

/*splitter border*/

.RadSplitter_[Your_skin_name]

{

    border-top-width: 0px ... ;

}

 

/*pane's borders*/

.RadSplitter_[Your_skin_name] .pane,  

.RadSplitter_[Your_skin_name] .paneHorizontal 

{ 

    border-top-width: 0px ... ; 

}

When using RadSplitter for ASP.NET AJAX  the borders can be removed very easy - the RadSplitter's BorderSize and PanesBorderSize properties are designed to control the borders' appearance. To remove all the RadSplitter's borders you should set BorderSize="0". In the same manner, to remove the RadPanes' borders you should set PanesBorderSize="0".