Rectangle border with specific length-CodePudding

I'm trying to create the following using html and css It's rectangle with with border that has specific length, starting from top center, the length around the rectangle should specify with percentage, so the left rectangle should have border with length of 30%, the right should have 45% more or less.

I tried many things like gradient without success

CodePudding user response：

.box {
      height: 150px;
      width: 150px;
      background-color: red;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
    }

    .box-top {
      display: block;
        position: absolute;
        background-color: blue;
      height: 8px;
      border-radius: 200px;
        top: 0;
        right:0;
        left: 40%;
        bottom: 0;
    }

.box-right {
      display: block;
        position: absolute;
        background-color: blue;
  width: 8px;
      height: 100%;
      border-radius: 200px;
        top: 0;
        right:0;
        bottom: 0;
    }
.box-bottom {
      display: block;
        position: absolute;
        background-color: blue;
      height: 8px;
      border-radius: 200px;
        right:0;
  left: 60%;
        bottom: 0;
    }

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

You can style as much as you like this is just to give to a rough idea how you might approach this. And there can be more than 1 ways to do it. Like I can see your outline is not inside the box but a few pixels out of it, and you can do that by tweaking the position values.

CodePudding user response：

You can achieve that effect using some before or after pseudo elements. I've given a simple way to do that below.

    .box {
      height: 150px;
      width: 150px;
      background-color: red;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
    }

    .box::before, .box::after {
        content: '';
        display: block;
        position: absolute;
        background-color: transparent;
        pointer-events: none;
    }

    .box::before {
        top: 0;
        right:0;
        left: 40%;
        bottom: 0;
        border-top: 8px solid blue;
        border-right: 8px solid blue;

    }

.box::after {
        top: 0;
        right:0;
        left: 60%;
        bottom: 0;
        border-bottom: 8px solid blue;
    }

    <div ></div>

CodePudding user response：

<svg viewBox="0 0 500 500">
  <style>
    #curve {
      fill:#0004;
      box-shadow:0 0 0 8px #0004;
    }
    .border{
      letter-spacing:-5px;
      fill:crimson;
    }
  </style>
  <path id="curve" fill="transparent" d="m100 50,h50,a25 25 0 0 1 25 25,v100,a25 25 0 0 1 -25 25,h-100,a25 25 0 0 1 -25 -25,v-100,a25 25 0 0 1 25 -25" />
  <text width="500">
    <textPath xlink:href="#curve" >
••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
    </textPath>
  </text>
</svg>

This isn't possible with only html and css. If you'd make the border with box-shadow: inset 0 0 0 5px, you could use another element on top of it with a conic-gradient with hard color stops to hide the unwanted parts of the box-shadow. The percentage for the color-stops determines how much is shown. The rounded corners on the line aren't possible like this.