在div元素周围创建高光，其中highlight元素具有白色填充和彩色边框

Question

The goal is to highlight the border of a div, and allow this highlighting to be visible no matter the underlying colors. The thought was to achieve this by creating a border around the div where each border element (in this case circles, not dashes) contains a white fill and itself a colored border.

Unfortunately, the borders don't overlap and are instead offset, which generates a two-border look instead of a single border with different colors.

Codepen: https://codepen.io/anon/pen/gqbrzv

<div class="selectionBox">
  <div class="inner"></div>
</div>

   .selectionBox {
      width: 100px;
      height: 100px;
      background: blue;
      box-sizing: border-box;
      position: absolute;
      border: 5px dotted #FFF;
      pointer-events: none;
   }

   .selectionBox .inner {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 7px dotted #F23C32;  
   }

Answer 1

You can consider radial gradient to achieve this:

 .selectionBox { width: 100px; height: 100px; padding: 10px; background: linear-gradient(blue,blue) content-box, /*will hide the radial gradient inside and keep them only visible on the padding*/ radial-gradient(#fff 40%,red 44%,red 58%,transparent 60%) top left/10px 10px, blue; box-sizing: border-box; position: absolute; pointer-events: none; } 

 <div class="selectionBox"> </div> 

Answer 2

If you have an absolute element, it will always be positioned according to the first parent that's relative, and if this has a border, it will offset according to that. My solution involves putting both selectionBox and inner within an absolutely positioned container, and then making these elements the same size, except the inner element has red dots:

 .container { position: relative; } .selectionBox { width: 100px; height: 100px; background: blue; box-sizing: border-box; position: absolute; top: 0; left: 0; border: 7px dotted #FFF; pointer-events: none; } .inner { position: absolute; top: 0; left: 0; width: 100px; height: 100px; box-sizing: border-box; border: 7px dotted #F23C32; } 

 <div> <div class="selectionBox"> </div> <div class="inner"></div> </div>