Color border inverted

Question

I would like to create a border with 2 two colors inside. The first color will be in blue and the next in white.

In my code, there is the colors which are inverted... The white before the blue... I don't understand why ?

.border-color-blue{
  height: 182px;
  width: 260px;
  background-color: blue;

}
.border-white{
  border: 1px solid #e0e0e0;
  background: white;
  width: 260px;

}

<div class="border-color-blue">
   <div class="border-white">Lorem ipsum dolor sit amet, ei cum option deserunt, sed cu dicta albucius dissentias.</div>
</div>

not clear what you want, but in case you have the opposite result, then switch the colors and you will have the intended result? — Temani Afif, Dec 25 '18 at 21:19
@ Temani Afif: Indeed, except that the text must be downstairs — anais_stemb, Dec 25 '18 at 21:24
@Temani Afif : for example like this https://imgur.com/a/WkMqTkD — anais_stemb, Dec 25 '18 at 21:36

score 0 · Answer 1 · answered Dec 25 '18 at 21:18

This is all regular.

The whole container is blue.

Inside there is another container, with a white background.

To illustrate, added the opacity rule to border-white.

The one in forefront is hiding.

You can adjust which one end on top with the z-index rule.

.border-color-blue{
  height: 182px;
  width: 260px;
  background-color: blue;

}
.border-white{
  border: 1px solid #e0e0e0;
  background: white;
  width: 260px;
  opacity: 0.7

}

<div class="border-color-blue">
   <div class="border-white">Lorem ipsum dolor sit amet, ei cum option deserunt, sed cu dicta albucius dissentias.</div>
</div>

Color border inverted

1 Answers1