How can I create a polka dot border?

Question

I am trying to create a polka dot border around my content. For example:

I have managed to achieve this by repeating an image (of two individual dots).

.dots {
    background: url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png');
    background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
    background-position: right top, left top, right top, right bottom;
}

However it is an imperfect result. On certain sizes the dots will start to overlap.

I'm not sure how to avoid this problem as the image doesn't seamlessly tile.

Is there some other approach I could take for an effect which doesn't suffer from these faults?

Answer 1

You can easily do this with radial-gradient as a repeated background then adjust the values depending on the height/width of the container:

.dots {
  width: 300px;
  height: 200px;
  padding: 60px 70px;
  box-sizing: border-box;
  background: 
   linear-gradient(#fff 0 0) content-box, 
   radial-gradient(circle at 12px 12px, #000 20%, #0000 22%) 12px 2px /33px 50px, 
   radial-gradient(circle at 12px 12px, #000 20%, #0000 22%) 33px 27px/33px 50px;
}

<div class="dots">
  The content here
</div>