CSS partial border with rounded caps

140 Views Asked by M.Sarabi At 13 July 2023 at 14:14

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>

Original Q&A

There are 1 best solutions below

Temani Afif On 13 July 2023 at 15:24 BEST ANSWER

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>

CSS partial border with rounded caps

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in BORDER

Related Questions in ROUNDED-CORNERS

Trending Questions

Popular # Hahtags

Popular Questions