Unable to modify the border colour for the top navigation ribbon

Question

I want to define a blue border for all the top navigation ribbons, so using Firebug I have detected the classes which are responsible for the ribbon as shown in the below two images:-

So I use the following CSS rules inside my custom CSS document:-

.ms-cui-tabBody{
    border-color:#008CD2 #008CD2 #008CD2 #008CD2 !important;
    border-top-color:#008CD2 !important;

}
.ms-cui-tabBody.ms-cui-tabBody-gr{
    border-color:#008CD2 #008CD2 #008CD2 #008CD2 !important;
border-top-color:#008CD2 !important;
}

But unfortunately this has changed only the buttom boarder colour to be blue, while the “Calendar” tab still have green upper boarder, and “Page Option” tab have no upper boarder color ? can anyone advice on how I can change the boarder to be all blue? Thanks.

Answer 1

You need to know that each ribbon has a different background color, border, etc. to differentiate functionality. It is indeed not necessarily recommended to make them all uniform. Neverthelless, each ribbon has also it's own CSS selector and if you really want them all, you would need to change all, one by one and keep testing in various contexts (libraries, lists) as well as RTE context (Formatting, Image, etc.) - see here https://www.nothingbutsharepoint.com/sites/eusp/Pages/SharePoint-2010-Ribbon-CSS-Classes-Explained.aspx