KPC
Kevin Powell - Communityā€¢2y ago
Dovah

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
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
Unknown Userā€¢2y ago
Message Not Public
Sign In & Join Server To View
Dovah
DovahOPā€¢2y ago
None of that would make only corners visible though. I believe.
Unknown User
Unknown Userā€¢2y ago
Message Not Public
Sign In & Join Server To View
Dovah
DovahOPā€¢2y ago
Let me check it šŸ˜„
Unknown User
Unknown Userā€¢2y ago
Message Not Public
Sign In & Join Server To View
Dovah
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
CodeNascherā€¢2y ago
My approach using clip-path https://codepen.io/CodeNascher/pen/BaOKERd
Unknown User
Unknown Userā€¢2y ago
Message Not Public
Sign In & Join Server To View
CodeNascher
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
Dovah
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
Dovah
DovahOPā€¢2y ago

Did you find this page helpful?