How to Increase Space Between Dotted Border Dots

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>

How to increase space between dotted border dots and write between them

Here's one way which doesn't require a 'gap' in the dots - we just write on top of them (with a black background and a bit of padding depending on what you want).

Without more info on exactly what is required in terms of spacing of the text it is not possible to be more specific but this layout using rotated text and different elements for each 'chunk' of text hopefully gives you a start.

 body {
  background-color: black;
}
.box {
  height: 100vh;
  background-image: linear-gradient(to bottom, #ffffff 10%,rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px; 
  background-repeat: repeat-y;
  position: relative;
}
.text {
  color: white;
  transform: rotate(-90deg);
  transform-origin: 0 center;
  position: absolute;
  background-color: black;
  padding: 5px;
}
.text:nth-child(1) {
  top: 90%;
}
.text:nth-child(2) {
  top: 30%;
}
</style>

<div class="box">
<div class="text">some text</div>
<div class="text">and some more</div>
</div>

increase spacing between dashed border for th tag of table

A simple answer would be to abandon trying to use the CSS border settings, which can vary between browsers, and go for total control of the spacing (either relative in relation to the width of the element or absolute in terms e.g. of px units) by using background image of a linear gradient.

Here's an example which uses % sizing, but you may want it to be in say em units in order to get it looking similar for a particular font size.

table thead tr {
  display: inline-block;
  padding: 1vmin;
  background-image: linear-gradient(to right, black 0 50%, transparent 50% 100%), linear-gradient(to right, black 0 50%, transparent 50% 100%);
  background-repeat: repeat no-repeat;
  background-size: 10% 1px;
  background-position: 0 0, 0 calc(100% - 1px);
  
}

<table><thead><tr><th colspan="2">PROJECT NAME</th><th colspan="2">BUILD</th></tr></thead></table>

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

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 fill the horizontal space between two divs using dotted/dashed line using CSS

Your template looks very suspiciously like svg lines that use stroke-dasharray and round strike-linecap

.getStarted {
  justify-content: center;
  align-items: center;
  text-align: center;
}
h3 {
  color: #006ebe;
  font-size: 2.3vw;
  margin-bottom: 100px;
}

.Icons {
  gap: 2vw;
  display: flex;
  justify-content: center;
}

.circle {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 10px;
  background: #0093ff;
  border: 3px solid #0093ff;
  color: white;
  text-align: center;
  font: 20px Poppins, sans-serif;
  font-weight: 600;
  line-height: 22px;
}

.dash {
  width: 10%;
  transform: rotate(-0.07deg);
}
.dash line {
  stroke: #0093ff;
  stroke-dasharray: 0.5 3.2;
  stroke-linecap: round;
}

<div id="getStarted" class="getStarted">
  <h3>How to get started?</h3>
  <div class="Icons">
    <div class="circle">

    </div>
    <svg class="dash" viewBox="-10 -5 20 10"><line x1="-9" x2="9"></line></svg>
    <div class="circle">

    </div>
     <svg class="dash" viewBox="-10 -5 20 10"><line x1="-9" x2="9"></line></svg>
     <div class="circle">

    </div>
  </div>
</div>