Как сделать border style circle на css?

#css #css3

Как сделать границу кружочками на css, как на картинке, не используя при этом повторяющееся
изображение круга, но при этом, чтобы при различном размере экрана количество кружков
отличалось?

Кроссбраузерность приветствуется.


    

Ответы

Ответ 1

Варианты, которыми я пользовался:

1. Градиентом:

https://caniuse.com/#search=radial-gradient



.block {
  width: 200px;
  padding: 20px;
  background: 
   radial-gradient(circle at center, red 60%, transparent 61%) top left/10px 10px
repeat-x,
   radial-gradient(circle at center, green 60%, transparent 61%) bottom left/10px
10px repeat-x;
}
Пример с градиентом




2. С картинкой, как было предложено в комментарии. Но лучше не png, как в примере, а svg:

https://caniuse.com/#feat=border-image



.block2 {
  border-width: 0 0 13px 0;
  border-style: dotted;
  border-color: #d57e00;
  border-image-source: url("https://cl.ly/3c2J3c0l3r0P/dots.svg");
  border-image-slice: 33% 33%;
  border-image-repeat: round;
}
Пример с картинкой SVG






Не сильно силен в вёрстке, но думаю ещё есть варианты.