How Can I Create A Polka Dot Border?

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

Solution 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:60px70px;
  box-sizing:border-box;
  background:
  linear-gradient(#fff,#fff) 68px50px/calc(100% - 136px) calc(100% - 100px) no-repeat,
  radial-gradient(circle at 12px12px,#00020%, transparent 22%) 12px2px/33px50px,
  radial-gradient(circle at 12px12px,#00020%, transparent 22%) 33px27px/33px50px;
}

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

Solution 2:

The problem is occurring because your background image is not as wide as the screen, and is trying to repeat itself.

To correct this, the easiest solution would be background-size: cover. This ensures that the image fills the entire screen, meaning it will never 'wrap around'. Note that this will stretch the image so that some distortion occurs depending on the aspect ratio.

If distortion is a concern, there are other two possible solutions:

1. Ensure that the image is as large as the largest screen resolution you want to display it on (optimally additionally scaling up the size of the displayed image based on viewport)
2. Craft the image so that it perfectly overlaps itself when it wraps around, and then make use of background-repeat.

Here's an example of background-size: cover:

.dots {
  border: 5px solid black; /* For Snippet */height: 50vh; /* For Snippet */width: 50vw; /* For Snippet */background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Polka_dots.svg/1200px-Polka_dots.svg.png');
  background-size: cover;
}

<divclass="dots"></div>