Radmenu item border color

[james]

I've added the following styling but it doesn't remove the white border or change the color as shown in the image. Also how can I remove the white vertical line on the end of the menu?

 

      .RadMenu_MetroTouch .rmRootGroup
       {          
            border-style: none  !important;
            border-color:gray  !important;

       }

[Vessy]

Hi james,

In order to remove the white borders between the menu items, you will need to apply the desired styles to the li elements. Also, please, note that when the border-style is set to none, the border-color will not be applied as well.

        <style>
            .RadMenu .rmRootGroup li {
                /*border-style: none !important;*/
                border-color: red !important;
            }
        </style>
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1"
            runat="server" ShowToggleHandle="true" Skin="MetroTouch">
            <Items>
                <telerik:RadMenuItem Text="Home" NavigateUrl="DefaultCS.aspx" />
                <telerik:RadMenuItem Text="Products">
                    <GroupSettings Width="200px" />
                    <Items>
                        <telerik:RadMenuItem Text="Chairs" NavigateUrl="DefaultCS.aspx?page=chairs" EnableImageSprite="true" CssClass="icon-chair"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sofas" NavigateUrl="DefaultCS.aspx?page=sofas" EnableImageSprite="true" CssClass="icon-sofa"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Tables" NavigateUrl="DefaultCS.aspx?page=tables" EnableImageSprite="true" CssClass="icon-table"></telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Stores" NavigateUrl="DefaultCS.aspx?page=strores" />
                <telerik:RadMenuItem Text="About" NavigateUrl="DefaultCS.aspx?page=aboutus" />
            </Items>
        </telerik:RadMenu>

As for the last vertical white line - it is not part of the default styling of the menu and I will advise that you follow the first two points in the following blog, inspecting where this style is coming from (it can be inherited by some global CSS style):

Improve Your Debugging Skills with Chrome DevTools

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

Regards,
Vessy
Progress Telerik