unable to override a ribbon border color

Question

I have a ribbon with green boarder , inside SharePoint server 2013 as follow:-

The ribbon has three css classes , and inside my custom CSS, i define the following CSS rules:-

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

}
.ms-cui-ribbon{
    border-color:#008CD2 !important;
}

but still the ribbon have a green boarder instead of blue border .

Can anyone advice please?

Answer 1

• fix css rule

  your css rule is not correct:

  1. missing . before ms-cui-tabBody-gr
  2. remove space between classes: .ms-cui-tabBody and .ms-cui-tabBody-gr

  the right code is

  .ms-cui-tabBody.ms-cui-tabBody-gr{
       border-color:/*any color*/ !important;
  }
  

  the best, set top and bottom border

  .ms-cui-tabBody-gr, .ms-cui-ct-topBar-gr{border-color:/*any color*/ !important;}

• put your css after all css links of SP