如何在 div 元素上显示边框 css？

Question

Image attached in this link

In number 9 cell border is over the background color

How do I show the border over the div or background Color and it should be responsive?

<div className="borderOverDiv"><div>
<div className="backgroundClr"></div>

.borderOverDiv{
    position: absolute;
    border: 1px solid red;
    width: calc(100% - 94%);
    height: 30px;
    border-radius: 10px;
}

.backgroundClr{
    background: blue
}

this code as I tried, seems not working

Answer 1

I am assuming that you are new to css so I will try to explain what is going on with this code the best that i can.

The fun part is in .element.active:after
There is a few thing

1. position: absolute this will allow us to set this element absolutly to container. But witch container? First that has position set to a different value than static or its initial value. That is why .element has position: relative which doesn't do anything on its own.
2. top, right, bottom, left which tell that this element will be exceeding parent element on every side by 5px .
3. z-index Simply the higher the value the "closer" this element is to user. initial value is 0 so 1 is placing this element above every other element.
4. content is required in pseudo-element:after in order to show them. This property just needs to be set and doesn't have to have any value specified.

The reis is just to make it look nicer.
And thats it.

You can use other element inside .element if you feel like it.
For example

<div class="element">
    <div class="overlay"></div>
</div>

and it will work just fine if you will follow point form 1 to 3 (point 4 is required, as I said earlier, only in pseudo-element) but it will be less responsive. For example what will you have to do when other element needs this overlay? You will have to use javascript to append .overlay element to .element and with pseudo-element you just need to append class. or just show this overlay on hover . Other advantage is that it look prettier and doesn't bloat you html.

 .container { padding: 5px; display: flex; }.element { position: relative; background-color: #0000ff; padding: 10px 20px; display: inline-block; color: #ffffff; }.element.active:after { content: ''; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; border-radius: 40px; background-color: rgba(200, 200, 200, .4); border: 1px solid rgba(200, 200, 200,.8); z-index: 1; }

 <div class="container"> <div class="element">7</div> <div class="element active">8</div> <div class="element">9</div> </div>

Answer 2

replacing className with class should do the trick