Question: I have a class for a specific font color, and another class for a border color. When I assign an element the class for both, the font color class takes over for both the font and the border.

See example: <https://jsfiddle.net/e81jrzfu/>

```
html {
  background: #fff;
}
.border-gold {
  border-color: #f4cc55;
}
.color-red {
  color: #FF0000;
}
.midquote {
        display: block;
        margin: 1em;
        padding: 0.6em;
        text-align: center;
        border-top: 0.12em dashed; 
        border-bottom: 0.2em solid;
    }
    .midquote .icon {
        display: block;
        margin-top: -1.4em; 
    }
    .midquote i {
        background: #fff;
        padding: 0 0.6em 0 0.6em;
    }

    .quoting {
        display: block;
    }

```

And the HTML:

```
<div class="midquote color-red border-gold">

   <span class="icon"><i class="fa fa-quote-left"></i></span>
   This is an amazing quote from someone.
   <span class="quoting">Jon Doe</span>
</div>

```

Answer: 
You can just increase [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) of `border-gold` selector like this `.midquote.border-gold` or `div.border-gold`

> 
> **What is Specificity?**
> 
> 
> If two selectors apply to the same element, the one with higher specificity wins
> 
> 
> 

```css
html {
  background: #fff;
}
.midquote.border-gold {
  border-color: #f4cc55;
}
.color-red {
  color: #FF0000;
}
.midquote {
  display: block;
  margin: 1em;
  padding: 0.6em;
  text-align: center;
  border-top: 0.12em dashed;
  border-bottom: 0.2em solid;
}
.midquote .icon {
  display: block;
  margin-top: -1.4em;
}
.midquote i {
  background: #fff;
  padding: 0 0.6em 0 0.6em;
}
.quoting {
  display: block;
}
```

```html
<div class="midquote color-red border-gold">

  <span class="icon"><i class="fa fa-quote-left"></i></span> This is an amazing quote from someone.
  <span class="quoting">Jon Doe</span>
</div>
```
if i understand it correctly you need to add *!important* for *.border-gold* for this as follow:

```
.border-gold {
  border-color: #f4cc55 !important;
}
.color-red {
  color: #FF0000;
}

```