Kevin Powell - Community•2y ago

Help with making only border corners visible! (Example inside)

I'm doing this simple exercise and just noticed this little thingy they did with borders. I have no clue how they made it. Any ideas? Edit: No pictures were used for it.

12 Replies

JWode•2y ago

dunno, but you could always place a :before and :after pseudo element at both ends with rounded corners and offset them by a pixel or 2? There's definitely a better way of doing it though

Unknown User•2y ago

Message Not Public

DovahOP•2y ago

None of that would make only corners visible though. I believe.

Unknown User•2y ago

Message Not Public

DovahOP•2y ago

Let me check it 😄

Unknown User•2y ago

Message Not Public

DovahOP•2y ago

Yeah, it is a solution, but it does not match 100% with theirs. Will try looking for it myself, and will see if I find anything. Thanks for helping either way! LD 😄

CodeNascher•2y ago

My approach using clip-path https://codepen.io/CodeNascher/pen/BaOKERd

Unknown User•2y ago

Message Not Public

CodeNascher•2y ago

it's not 100% perfect tho. if you zoom in you can see a tiiiiny bit of the non-clipped border must be rounding issues or sub-pixel stuff using border-image could work too maybe. and it's slightly different in different browsers

DovahOP•2y ago

Will save it and try it out in a bit. 😄 It does look daunting. Not working 😦 But the idea is there So I kinda did it if anyone is interested

.category-wrapper {
    position: relative;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    z-index: -2;
    border-radius: 15px;
    border: 1px solid var(--red-300);
}
.category {
    border-radius: 15px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.category::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 16px;
    width: calc(100% - 32px);
    height: calc(100% + 12px);
    z-index: -1;
    background-color: #fff;
}
.category::after {
    content: '';
    position: absolute;
    top: 7px;
    left: -1px;
    width: calc(100% + 5px);
    height: calc(100% - 14px);
    z-index: -1;
    background-color: #fff;
}

.category-wrapper {
    position: relative;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    z-index: -2;
    border-radius: 15px;
    border: 1px solid var(--red-300);
}
.category {
    border-radius: 15px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.category::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 16px;
    width: calc(100% - 32px);
    height: calc(100% + 12px);
    z-index: -1;
    background-color: #fff;
}
.category::after {
    content: '';
    position: absolute;
    top: 7px;
    left: -1px;
    width: calc(100% + 5px);
    height: calc(100% - 14px);
    z-index: -1;
    background-color: #fff;
}

.category being the main div, around which I needed to have that border

DovahOP•2y ago

Gaming

Programming

Help with making only border corners visible! (Example inside)