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>
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.
But if you can use SVG you have control over
stroke-dasharray
Calculating the
stroke-dasharray
values:Why the magic number 2.14? According to Robert's answer on another question:
We know that our circle has a radius of 50 (
<circle ... r="50" />
). So with a little maths (you can use google for this):we calculate that our circumference is
314.15927
Say we want 100 dashes, from there
C/100 ≈ 3.14
. This gives us thedash-array: 1 2.14
.