label(for='toggle') Toggle border color
input#toggle(type='checkbox')
.grid
  .box
  .box

*
*:after
  box-sizing border-box
 
body
  display flex
  align-items center
  justify-content center
  min-height 100vh
  flex-direction column
  
.grid
  height 50vmin
  width 50vmin
  display grid
  grid-template-columns 1fr 1fr
  grid-template-rows 1fr 1fr
  margin-top 1rem
  
.box
  background red
  position relative
  
  &:nth-of-type(1)
    grid-column span 2

  &:nth-of-type(2)
    grid-column 2
    grid-row 2
    
    &:after
      content ''
      position absolute
      height 100%
      width 100%
      border 8vmin solid red
      border-radius 50%
      transform translate(-68%, -31.75%)
      -webkit-clip-path polygon(50% 0, 50% 50%, 100% 50%, 100% 0)
      clip-path polygon(50% 0, 50% 50%, 100% 50%, 100% 0)
      
:checked ~ .grid .box:nth-of-type(2):after
  border-color blue