I have a circle that has dotted borders. However, instead of dots the border should be more like vertical dashes.

Is there a way to make the border exactly the same as the design (the vertical dashes one not the thick solid line) with css?

I want to change this class: "OtherCaptionBorder"

My css:

    .caption_circle{

    position: absolute;

    top: 450px;

    left: 7%;

    z-index: 10;

    padding-top: 35px;

    padding-bottom: 20px;

    color: #fff;

    text-align: center;

    height: 245px;

    width: 245px;

    background-color: #373737;

    opacity: 0.83;

    border-radius: 50%;

    display: inline-block;

    border-color: #fff;

    border-style: solid;

    border-width: 7px;

    font-family: open_sansregular;

    font-weight: 600;

}

.OtherCaptionBorder{

position: absolute;

    top: 2px;

    left: 1%;

    z-index: 10;

    padding-top: 35px;

    padding-bottom: 20px;

    color: #fff;

    text-align: center;

    border-radius: 50%;

    display: inline-block;

    height: 228px;

    width: 228px;

    border-radius: 50%;

    border: 2px dotted #ffffff;

}

.InnerCircleText{

margin-top: 8px;

    font-size: 18px;

    font-family: open_sansregular;

    font-size: 24.3px;

    font-weight: bold;

    font-style: normal;

    font-stretch: normal;

    line-height: 1.11;

    letter-spacing: 0.8px;

    text-align: center;

    color: #ffffff;

}

Here is my HTML :

  <div class="caption_circle">

   <div class="OtherCaptionBorder">

   <p class="InnerCircleText">

    DOCTOR-<br>

    RECOMMENDED<br>

    FOR IBS, IBD,<br>

    CELIAC<br>

    & SIBO<br>

    <hr class="HRHomepage">

    </p>

    </div>

  </div>

Here is how I want my circle to look like:

You might be able to achieve something close to what you want with CSS alone, but as you can't control the length of (nor the space between) the dashes in the border style, you will most likely get an unsatisfactory result at the start/end of the circle where the borders meet.

body {

background: #ccc;

}



.outer {

  background-color: rgba(0,0,0,0.5);

  width: 300px;

  height: 300px;

  border-radius: 50%;

  box-sizing: border-box;

  border: 5px solid white;

}



.inner {

  width: 100%;

  height: 100%;

  border: 5px dashed white;

  border-radius: 50%;

  box-sizing: border-box;

}

<div class="outer">

  <div class="inner"></div>

</div>

But if you can use SVG you have control over stroke-dasharray

.img-bg {

  background-image: url(https://picsum.photos/900/500);

  background-size: cover;

}



.outer-circle {

  position: relative;

  background: transparent;

  width: 20em;

  height: 20em;

  border-radius: 50%;

  box-sizing: border-box;

  border: 1em solid white;

  overflow: hidden;

}



.custom-circle {

  stroke-width: 10;

  stroke: white;

  stroke-linecap: butt;

  fill: rgba(0, 0, 0, 0.5);

  stroke-dasharray: 1 2.14; /* See below for an explanation */

}



.text {

  margin: 0 auto;

  padding: 0 1.5em;

  color: white;

  text-align: center;

  position: absolute;

  top: 50%;

  font-size: 2em;

  transform: translateY(-50%);

}



hr {

  width: 60%

}

<section class="img-bg">

  <div class="outer-circle">

    <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <circle class="custom-circle" cx="50" cy="50" r="50" />

</svg>

    <div class="text">Vestibulum pellentesque ac arcu eget.<hr/></div>

  </div>

</section>

Calculating the stroke-dasharray values:

Why the magic number 2.14? According to Robert's answer on another question:

The circumference of the circle / sum of the stroke-dasharray values needs to be an integer if you want evenly spaced lines...

We know that our circle has a radius of 50 (<circle ... r="50" />). So with a little maths (you can use google for this):

C=2πr=2·π·50≈314.15927

we calculate that our circumference is 314.15927

Say we want 100 dashes, from there C/100 ≈ 3.14. This gives us the dash-array: 1 2.14.