How to make border CSS inherit color?

Question

How to make border CSS inherit color?

Navigation

#1 by (2 votes)

3

I built a simple container using CSS. For me to do DIV that gets the text with blue background I ground a class that I created to put background where I call it. But I need to put the blue border on the DIV that receives the content. How do I make the border inherit the color of the class bg-blue-3 ? If possible I wanted to do this in HTML because I'm going to 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>

html css

asked by anonymous 29.04.2016 / 16:27

1 answer

Hide screen options if user is not allowed Error installing Glassfish

score 2 · Accepted Answer

Preprocessing your CSS

Simply inheriting with css would not be possible because, although it is the same color, it is applied to different properties. One solution would be to use a css preprocessor, such as less or sass. Through it you could create mixins (variables) inside your css, so you could assign the value of a color to the variable, and put it in 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: link

Create mixin and other resources: link

Ps: If you want the color of both to change at run time (after the page has loaded), it is only possible with javascript.