[Solved] radmenu\Radsitemap Border showing on select or click.

[Brete]

I recently upgrade  to  2026.2.708 from 2025.1.416      

After upgrading there is a border appearing when I click on the menu item/radsitemap.    How do I remove the border?    Attached screenshot shows the border appearing.    The border is either dark blue or red depending on if I select or just right click the item, otherwise the border is not currently showing.    

my current css.  

        .RadSiteMap .rsmLevel > .rsmItem .rsmLink {
            color: #1c4259 !important;
            font-size: 12px !important;
        }

            #GDIV > .RadSiteMap .rsmLevel > .rsmItem .rsmLink:hover,
            .RadSiteMap .rsmLevel > .rsmItem .rsmLink:hover {
                color: #b31d3d !important;
                font-size: 12px !important;

            
            }


        #GDIV > .RadSiteMap .rsmLevel > .rsmItem .rsmLink {
            color: #1c4259 !important;
            font-size: 11px !important;
            line-height: 12px !important;
         
        }

            #GDIV > .RadSiteMap .rsmLevel > .rsmItem .rsmLink:hover {
                color: #be1d3d !important;
                font-size: 11px !important;
                line-height: 12px !important;
             
            }

        .RadMenu.RadMenu_Context.higherMenu {
            z-index: 2147483647 !important;
        }

        .RadMenu_Default .rmRootGroup .rmFocused > .rmLink {
            border-color: transparent !important;
            box-shadow: none !important;
        }

 

Thanks,   

[Vasko]

Hello Brete,

The border you are seeing after upgrading to version 2026.2.708 appears when menu or sitemap items are focused or active. The color (dark blue or red) is determined by the browser's default styling for accessibility:

• Dark blue: Usually indicates a focused state (e.g., when tabbing or clicking an item).
• Red: May appear on active or right-clicked states, depending on the browser and its default focus/active styles.

This effect is not specific to Telerik controls but is more visible in recent browser versions and after framework updates.

You can override these browser styles by targeting the relevant CSS classes and states for both RadMenu and RadSiteMap. Here’s how you can address each scenario:

html body .RadMenu .rmFocused > .rmLink,
html body .RadMenu .rmClicked > .rmLink,
html body .RadMenu .rmLink:focus,
html body.RadMenu .rmLink:active {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

html body .RadSiteMap .rsmLink:focus,
html body .RadSiteMap .rsmLink:active {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

Add these rules to your stylesheet. They will suppress the browser’s default focus/active border and outline for both controls.

Removing the outline can affect keyboard navigation for users who rely on visual focus cues. If accessibility is important, consider customizing the outline color instead of removing it completely.

Regards,
Vasko
Progress Telerik