Home/ Questions/Q 8862255
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T15:41:05+00:00

I am wondering how to have a border that is circles or dots(not squared

  • 0

I am wondering how to have a border that is circles or dots(not squared dots, border: white dotted 2px; <- I don’t want this) in CSS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    EDIT:

    I would recommend using CSS3 border-image with the understanding that IE10 and below will need a polyfill.

    .bordered-box {
    border-style: solid;
    border-width: 27px;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 fill repeat;
}

    Original Accepted Answer:

    The only way to guarantee that it shows up as circles across all browsers is to use an image.

    There is a tutorial here: http://www.htmlgoodies.com/beyond/css/how-to-create-border-images-using-css3.html

    CSS:

    .dots {
    border-width: 30px;
    -webkit-border-image:url(images/dots.png) 30 repeat stretch;
    -moz-border-image:url(images/dots.png) 30 repeat stretch;
    border-image:url(images/dots.png) 30 repeat stretch;
    padding: 30px;
}

    HTML:

    <div class="dots"></div>

    Image:

    CSS3 image border of dots

    If you need it to work for IE, you could also just create a wrapper div that has a background of dots and just give the inner div a padding of whatever height the dots are.

    • 0