Menu
I am trying to create a rectangle with partial borders with rounded caps. Like the image below:
I have come this far to remove a part of the border. But I can't think of an easy way to get the result in the picture:
body {
position: relative;
}
div.inner {
position: absolute;
top: 10px;
left: 10px;
display: inline-block;
width: 420px;
height: 320px;
background-color: #f80;
border-radius: 40px;
}
div.border {
position: absolute;
display: inline-block;
width: 400px;
height: 300px;
background-color: transparent;
border-radius: 40px;
border: 20px solid black;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 60% 0%, 60% 75%, 25% 75%, 25% 0%);
}<body>
<div class="inner"></div>
<div class="border"></div>
</body>
890
asked Jul 27 '26 18:07
Here is an idea using one element. It may look complex but all you have to do is to adjust the CSS variables
.box {
--t: 20px; /* border thickness */
--c: #000; /* border color */
--x: 30%; /* the start of the gap */
--y: 60%; /* the end of the gap */
margin: 50px;
width: 300px;
height: 200px;
background: orange; /* background color */
position: relative;
border-radius: 40px; /* radius */
}
/* you don't need to touch the below*/
.box:before {
content:"";
position: absolute;
inset: calc(var(--t)/-2);
border-radius: inherit;
padding: var(--t);
--g: calc(var(--t)/2), var(--c) 49%,#0000 51%;
background:
radial-gradient(var(--t) at var(--x) var(--g)),
radial-gradient(var(--t) at var(--y) var(--g)),
linear-gradient(90deg,var(--c) var(--x),#0000 0 var(--y),var(--c) 0),
linear-gradient(var(--c) 0 0) 0 var(--t) no-repeat;
-webkit-mask:
linear-gradient(#000 0 0),
linear-gradient(#000 0 0) content-box;
-webkit-mask-composite: xor;
mask-composite: exclude;
}<div class="box"></div>
<div class="box" style="--t: 26px;--x: 50px;--y: 80%"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
