Overlapping border for a single DIV in CSS

Question

Expected output image posted here:
https://www.sololearn.com/post/108684/?ref=app

Answer 1

Hey there. Interesting question.
There is one solution for it by the use of before and after selectors of CSS.

I tried from my side. Hope it helps
explain inside css code
https://code.sololearn.com/W83y8IcuOeQN/?ref=app

Answer 2

I tried. you'll get some idea how to do it 🤔
https://code.sololearn.com/W4yRLvj8i276/?ref=app

Answer 3

i am not a css freak
bot position fixed and z could do that

Answer 4

I have tried to implement using border-style=double. But, follwing problems are occuring:-
1. With the increment of border-width, only border line thickness is increasing. While I need to increase the border spacing.
2. Border color need to be 'black-white-black' independent of div's background-color.
3. If border-width > border-radius then, inner border gets rectangular corner instead of round corner.
Thats why, I used before and after pseudo element.
But I am not able to position the after-element successfully. Can you help me?
Is there anyother better approach?
https://code.sololearn.com/W441JOosN14S/?ref=app