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

Dovah · 2023-02-22T17:06:34.337Z

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.

J

JWode•2/22/23, 5:43 PM

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

D

DovahOP•2/22/23, 6:16 PM

None of that would make only corners visible though.

D

DovahOP•2/22/23, 6:16 PM

I believe.

D

DovahOP•2/22/23, 6:34 PM

Let me check it

D

DovahOP•2/22/23, 6:40 PM

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

D

DovahOP•2/22/23, 6:40 PM

C

CodeNascher•2/22/23, 7:36 PM

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

C

CodeNascher•2/22/23, 7:39 PM

it's not 100% perfect tho.
if you zoom in you can see a tiiiiny bit of the non-clipped border

C

CodeNascher•2/22/23, 7:39 PM

must be rounding issues or sub-pixel stuff

C

CodeNascher•2/22/23, 7:40 PM

using

border-image

border-image

border-image

border-image could work too maybe.

CCodeNascher it's not 100% perfect tho. if you zoom in you can see a tiiiiny bit of the non-c...

C

CodeNascher•2/22/23, 7:43 PM

and it's slightly different in different browsers

D

DovahOP•2/22/23, 8:11 PM

Will save it and try it out in a bit.

D

DovahOP•2/22/23, 8:11 PM

D

DovahOP•2/22/23, 8:12 PM

It does look daunting.

D

DovahOP•2/22/23, 8:33 PM

Not working

D

DovahOP•2/22/23, 8:34 PM

But the idea is there

D

DovahOP•2/23/23, 4:10 PM

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-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;
}

D

DovahOP•2/23/23, 4:10 PM

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

D

DovahOP•2/23/23, 4:11 PM