JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr class="border1">
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr class="border2">
    <td>a</td>
    <td>b</td>
    <td>c</td>
</tr>
<tr class="border3">
    <td>4</td>
    <td>5</td>
    <td>6</td>
</tr>
</table>

<div style="height:20px;"></div>
<div style="width:50%;border-top:1px dotted blue;">
    The border should look like the blue border.
</div>

CSS

table {
    width: 50%;
}
.border1 td {
    border-top: 3px solid red;
}
.border2 td {
    border-top: 3px dotted red;
}
.border3 td {
    border-top: 3px dashed red;
}