Незавершенный бордер, как сделать?

Question

[Oleg]

Как можно сделать такой border?


Не получается сделать правильное округление, у меня максимум получается такой:

Comments

[Антон Литвиненко]

лучше такой чем никакой)

[Oleg]

Антон Литвиненко, А можно вообще ничего не делать :)

Answer 1

[Дмитрий]

<style>
    .test{
        border:5px solid black;
        height:200px;
        margin:50px;
        width:200px;
        border-radius: 20px;
        position: relative;
    }
    .test::before{
        position: absolute;
        content: " ";
        width:5px;
        height:166px;
        top:12px;
        left:-5px;
        background: #fff;
    }
</style>
<div class="test">
</div>

Comments

[Oleg]

Понял, спасибо!

[wadowad]

Чтобы не заморачиваться с цветом фона лучше его протащить от родителя. И там и там:
background-color: inherit;