Control the Dashed Border Stroke Length and Distance Between Strokes

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

dashed border stroke distance when use border-radius

You can use the following code:

#border {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%2350535AFF' stroke-width='2' stroke-dasharray='4%2c 8' stroke-dashoffset='81' stroke-linecap='round'/%3e%3c/svg%3e");
    border-radius: 20px;
    height: 80px;
    line-height: 80px;
    font-size: $sama-font-size-3;
    color: mat-color($mat-sama-gray, 58);
    text-align: center;
    cursor: pointer;
}

You can generate the code online from the site below:
Customize your CSS Border

and you can See the result from JSFiddle

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>