| <!DOCTYPE html> |
| <style> |
| .outer { |
| width: 40px; |
| height: 40px; |
| box-sizing: border-box; |
| display: flex; |
| } |
| .outer div { |
| flex: 1; |
| box-shadow: inset 0 0 0 5px blue; |
| } |
| .radius { |
| border-radius: 20px; |
| } |
| </style> |
| <div class="outer"><div></div></div> |
| <div class="outer" style="padding: 5px"><div></div></div> |
| <div class="outer" style="padding: 5px"><div></div></div> |
| <div class="outer" style="padding: 10px"><div></div></div> |
| <div class="outer" style="padding: 10px"><div class="radius"></div></div> |
| <div class="outer" style="padding: 5px"><div class="radius"></div></div> |
| <div class="outer" style="padding: 5px"><div class="radius"></div></div> |
| <div class="outer" style="padding: 10px"><div class="radius"></div></div> |
