Translucid border

Using padding + outline

by Hugo Vale Pereira

HTML

<div class="pai">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>

SASS

div.pai
  display: flex
  gap: 10px
  width: 400px
  height: 400px
  overflow: scroll
  border-radius: 70px
  
  padding: 50px
  outline-offset: -50px
  outline: 50px solid rgba(200,100,150,0.6)
  background-color: blue
  
  .a 
    flex: 0 0 100px
    width: 100px
    height: 100px
    background: red