Dotted/Dashed Circle Shapes Using CSS - Not Rendering Right in Chrome

svg{  height: 100px;  width: 100px;}circle {  fill: transparent;  stroke: green;  stroke-width: 3;}.solid{  stroke-dasharray: none;}.dashed {  stroke-dasharray: 8, 8.5;}.dotted {  stroke-dasharray: 0.1, 12.5;  stroke-linecap: round;}div {  height: 100px;  width: 100px;  color: green;  font-weight: bold;  text-align: center;  line-height: 100px;}

<svg viewBox="0 0 120 120">  <circle cx="55" cy="55" r="50" class="solid" />  <foreignObject x="5" y="5" height="100px" width="100px">    <div>100</div>  </foreignObject></svg>
<svg viewBox="0 0 120 120">  <circle cx="55" cy="55" r="50" class="dashed" />  <foreignObject x="5" y="5" height="100px" width="100px">    <div>100</div>  </foreignObject></svg>
<svg viewBox="0 0 120 120">  <circle cx="55" cy="55" r="50" class="dotted" />  <foreignObject x="5" y="5" height="100px" width="100px">    <div>100</div>  </foreignObject></svg>

Why does border: 5px dashed not come out as dashed in Firefox?

It's a bug, WebKit had a similar issue but it was fixed in June. Here are all the other outstanding border-radius defects in Firefox.

Control the dashed border stroke length and distance between strokes

Css render is browser specific and I don't know any fine tuning on it, you should work with images as recommended by Ham.
Reference: http://www.w3.org/TR/CSS2/box.html#border-style-properties

How to draw a dotted line with css?

For example:

hr {
  border: none;
  border-top: 1px dotted #f00;
  color: #fff;
  background-color: #fff;
  height: 1px;
  width: 50%;
}

before
<hr>
after

How to increase space between dotted border dots

This trick works for both horizontal and vertical borders:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

You can adjust the size with background-size and the proportion with the linear-gradient percentages. In this example I have a dotted line of 1px dots and 2px spacing.
This way you can have multiple dotted borders too using multiple backgrounds.

Try it in this JSFiddle or take a look at the code snippet example:

div {  padding: 10px 50px;}.dotted {  border-top: 1px #333 dotted;}.dotted-gradient {  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);  background-position: top;  background-size: 3px 1px;  background-repeat: repeat-x;}.dotted-spaced {  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);  background-position: top;  background-size: 10px 1px;  background-repeat: repeat-x;}.left {  float: left;  padding: 40px 10px;  background-color: #F0F0DA;}.left.dotted {  border-left: 1px #333 dotted;  border-top: none;}.left.dotted-gradient {  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);  background-position: left;  background-size: 1px 3px;  background-repeat: repeat-y;}.left.dotted-spaced {  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);  background-position: left;  background-size: 1px 10px;  background-repeat: repeat-y;}

<div>no  <br>border</div><div class='dotted'>dotted  <br>border</div><div class='dotted-gradient'>dotted  <br>with gradient</div><div class='dotted-spaced'>dotted  <br>spaced</div>
<div class='left'>no  <br>border</div><div class='dotted left'>dotted  <br>border</div><div class='dotted-gradient left'>dotted  <br>with gradient</div><div class='dotted-spaced left'>dotted  <br>spaced</div>

Dashed border with applied border-radius have wrong length in Firefox

Using the css property of border you can not achieve it.

Css rendering is browser specific and I think the only work around is to use image.

Rounded dotted border spacing in css

This is the closest that I could achieve. It uses multiple box-shadows of a single pseudo-element offset to the required positions.

This can easily be converted to a dotted border also by adding the below line to the pseudo-element.

border-radius: 50%;

Box Shadow is supported in IE9+ also.

Note: This approach would work if you have a fixed height and width. Not the ideal approach but I think this is the most you could achieve using CSS having IE9+ support.

.bord {    height: 185px;    width: 250px;    background: gray;    border-radius: 20px;    position: relative;    padding: 25px;}.bord:before {    position: absolute;    top: 20px;    left: 20px;    content:'';    background: black;    height: 5px;    width: 5px;    box-shadow: 50px 0px 0px black, 100px 0px 0px black, 150px 0px 0px black, 200px 0px 0px black, 250px 0px 0px black, 0px 190px 0px black, 50px 190px 0px black, 100px 190px 0px black, 150px 190px 0px black, 200px 190px 0px black, 250px 190px 0px black, 0px 47.5px 0px black, 0px 95px 0px black, 0px 142.5px 0px black, 0px 47.5px 0px black, 250px 47.5px 0px black, 250px 95px 0px black, 250px 142.5px 0px black;}

<div class="wrapper">    <div class="bord">abcd</div></div>

How to create the transparent circle with cut inside?

You can do this with :after pseudo-element

.circle {  width: 150px;  height: 150px;  border-top: 2px solid black;  border-left: 2px solid black;  border-right: 2px solid black;  border-bottom: 2px solid transparent;  border-radius: 50%;  position: relative;  transform: rotate(30deg);}
.circle:after {  content: '';  position: absolute;  bottom: 0;  border-radius: 50%;  height: 10px;  width: 40px;  left: 50%;  transform: translate(-50%, 7%);  border-bottom: 2px solid black;  border-top: 2px solid transparent;  border-left: 2px solid transparent;  border-right: 2px solid transparent;}

<div class="circle"></div>

Draw dashed border inside the custom shape using HTML & CSS

If you need to get the output by keeping same HTML mark-up then you have to use many pseudo selectors, CSS calc() function to calculate h2 tag width and many such properties to get output using CSS.

You have too even use position and z-index to hide circle border backside of h2 tag. And using margin you could arrange the remaining, so at one point whole diagram connects.

body {  font: 13px Verdana;}
h3{    background:#72bbab;  width:calc(100% - 95px);  height:85px;  margin-left:95px;  margin-top:21px;  display:flex;  justify-content:flex-start;  align-items:center;  border-top-right-radius:10px;  border-bottom-right-radius:10px;  padding-left:20px;  box-sizing:border-box;  color:#fff;}h3 i{  width:120px;  height:120px;  background:#72bbab;  border-radius:50%;  display:inline-block;  top:2px;  left:2px;  position:absolute;  z-index:-1;  overflow:hidden;}h3 i:before{  content:"";  width:100px;  height:100px;  border:2px dashed #fff;  position:absolute;  top:8px;  left:8px;  border-radius:50%;}h3:before{  content:"";  width:calc(100% - 120px);  height:65px;  border:2px dashed #fff;  position:absolute;  right:15px;  border-top-right-radius:10px;  border-bottom-right-radius:10px;}h3:after{  content:"";  width:3px;  height:68px;  background:#72bbab;  position:absolute;  top:28px;  margin-left:-61px;}

<h3><i></i>Text</h3>

Any rules/conventions on using dashed and dotted hyperlinks?

There was a time, way back in the day, when a few folks tried to stick with the idea that dashed underlines were for contextual help. I think that was a carry over from old Windows help files.

But, since then, no, there is no rule or standards as to what the style of underline means in a hyperlink. For better or worse, the underline, itself, isn't even a standard anymore as lots of sites forgo them (which, IMHO, is more often than not a bad idea).

All that said, I do like the idea and the attempt and differentiating on-page interaction vs. a link that actually takes you somewhere else.

---

Related Topics