Left half-rounded border

Question

I'm wondering how to achieve this kind of css active style link shape I designed, should i create a specific shape for the left rounded part or should I just use border-left and try to tweak it ?

Answer 1

you can use ::after css pseudo element for this. Here is example fiddle. Hope this helps you.

.link {
        height: 100px;
        width: 100px;
        background: red;
        position: relative;
        overflow: hidden;
    }
    .link::after{
        content: "";
        height: 80%;
        background: #fff;
        width: 20px;
        position: absolute;
        top: 10%;
        left: -10px;
        border-radius: 20px;
            transition: all .35s;
        opacity: 0;
    }
    .link:hover::after{opacity:1}

  <div class="link"></div>

Check this link. You can lean more about CSS Pseudo-elements from there.