Dots в примерах с их сайта реализованы с помошью текстового символа, который описывается в селекторе
.slick-dots li button:before.slick-dots li button:before {
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•'; /* <-- Вот этот символ */
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Соответственно чтобы изменить обводку нужно либо играться с
-webkit-text-stroke и реализовывать фоллбэк с помощью
text-shadow (плохой вариант), либо заменить этот символ на SVG изображение и задавать цвета уже в SVG (хороший вариант).
Вариант с text-stroke:
https://jsfiddle.net/mxssjfou/2/
Вариант с SVG:
https://jsfiddle.net/mxssjfou/3/
PS задавать свою тему dots, отличную от той, что берется в примере нужно с помощью свойства
dotsClass: 'my-dots-class' в настройках инициализации, но если нужно только слегка изменить - лучше скопировать CSS из темы и править где надо.
Простой
Средний