Get a break in an outline on a div-CodePudding

I have an outline around my div and i want a break on the right border

(how I want it to look like)

.customer-box-shadow {
  outline: 2px solid red;
}

<div >
  CONTENT
</div>

CodePudding user response：

Use mask and you will have transparency as well. I replaced outline with an inner shadow

.customer-box-shadow {
  box-shadow: 0 0 0 2px inset red; /* you can also use border */
  padding:50px;
  -webkit-mask:
     /* adjust the 60% to control the height of the cut */
    linear-gradient(#000 0 0) right/2px 60% no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}


body {
  background:linear-gradient(90deg,#ccc,#fff)
}

<div >
  CONTENT
</div>

If you want to keep using outline consider clip-path

.customer-box-shadow {
  --d: 2px; /* outline border */
  --c: 60%; /* the cut */
  outline: var(--d) solid red;
  padding:50px;
  clip-path:
   polygon(calc(-1*var(--d)) calc(-1*var(--d)),
          calc(100%   var(--d)) calc(-1*var(--d)),
          calc(100%   var(--d)) calc(50% - var(--c)/2),
          100% calc(50% - var(--c)/2),
          100% calc(50%   var(--c)/2),
          calc(100%   var(--d)) calc(50%   var(--c)/2),
          calc(100%   var(--d)) calc(100%   var(--d)),
          calc(-1*var(--d)) calc(100%   var(--d)))
}


body {
  background:linear-gradient(90deg,#ccc,#fff)
}

<div >
  CONTENT
</div>

CodePudding user response：

hide the border with another div, like this:

.bordered{
  display: block;
  width: 100px;
  height: 100px;
  border: 1px gray solid;
  position: relative;
}

.overlay{
  width: 25px;
  height: 25px;
  position: absolute;
  right: -12.5px;
  top: calc(50% - 12.5px);
  background: #fff;
}

<div >
  content ...
  <div ></div>
</div>

CodePudding user response：

No change in markup required. Use a pseudo element ::after to cover the unwanted parts of the outline:

.customer-box-shadow{
  display: block;
  width: 100px;
  height: 100px;
  outline: 2px solid red;
  position: relative;
}

.customer-box-shadow::after {
  background-color: white;
  content: "";
  bottom: 30px; /* you might want a percentage here */
  right: -2px;
  width: 2px;
  top: 30px; /* you might want a percentage here */
  position: absolute;
}

<div >
  content ...
</div>