Create knockout transparent border in CSS

Question

I want to create a border of an element with CSS - that knocks out the transparency till the background:

That is the target:

But all I can create is a border like this:

.circle {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    border: solid 10px rgba(255,0,255,0.5);        
    background: #bbbbff;
  }

Is it possible at all to create such a transparent border?

Using transparent as border color doesn't work.

user_8620333 · Answer

You can try like below:

.box {
  width: 200px;
  height: 150px;
  border: 15px solid #0000; /* transparent border to create the space */
  background:
    /* your circle placed at top right (width=60px, height=60px) */
    radial-gradient(50% 50%,#bbbbff 98%,#0000) top right/60px 60px no-repeat border-box,
    /* the conic-gradient will simulate the border of 4px */
    conic-gradient(from 90deg at 4px 4px,#0000 90deg,#000 0) 0 0/calc(100% - 4px) calc(100% - 4px) padding-box,
    /* red is the main background color*/
    red padding-box;
   /* use mask to cut a border around the circle 
      #000  = visible
      #0000 = invisible (the cut part)
   */
  -webkit-mask:radial-gradient(closest-side at top 30px right 30px,#000 60%,#0000 61% 98%,#000); 
}


body {
  background:pink;
}

Create knockout transparent border in CSS

1 Answers