How to make border CSS inherit color?

Question

Guys set up a simple container using CSS. For me to do the DIV that gets the text stick with blue background I ground a class I created to put background where I call it. But I need to put the blue border on DIV which receives the content. How do I make the border inherit the class color bg-blue-3? If possible I wanted to do this in HTML, because I will create several containers with different colors.

.bg-blue-3 {
    background-color: #42A5F5 !important;
}

.step-container {
    margin: 0 auto;
    border:1px solid;
    border-radius: 3px;
    background:#FFFFFF;
}
.step-container-head {
    padding: 10px;
    color: #ffffff;
    text-align: center;
}
.step-container-body {
    padding: 10px;
}

<div class="step-container container-width">
    <div class="step-container-head bg-blue-3">
        TEXTO
    </div>
    <div class="step-container-body">
        conteudo
    </div>
</div>

Answer 1

Pre-processing your CSS

Inheriting simply with css would not be possible, because although it is the same color, it is applied in different properties. A solution would be to use a css preprocessor, such as Less or Sass. Through it you could create mixins (variables) within your css, then you could assign the value of a color to the variable, and put it in the border and background-color. Every time you change the value of this variable, it would change everywhere it is referenced. See the tutorials on how to install Less and how to use mixin:

How to install: http://paradadigital.com/2013/11/01/instalar-compilador-de-less-no-nodejs.html

Create mixin and other resources: http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/

Ps: If you want the color of both to change at runtime (after the page has been loaded), it will be possible with javascript only.