Border trouble with CSS/HTML; CSS applying table but not borders

Question

I'm applying an external CSS to an HTML project to include borders in formatting for a table. Everything is applying to my table except the borders no matter what.

I have tried applying table {}, as well as table, th, td {}

  table,
th,
td {
  border-collapse: collapse;
  border: 2px #022D41;
  background-color: #DAECF3;
  text-align: center;
  margin: auto;
  table {
    border-collapse: seperate;
    width: 2;
    background-color: "#1AA6B7";
    border: 2px "#FE424D";
    text-align: center;
    margin: auto;
    /*aligning table to the center*/
  }
  th {
    border: 3px "#FE424D";
    background-color: "#022D41";
    color: #DAECF3;
  }
  td {
    border: 3px "#FE424D";
  }

<table border="4">
  <tr>
    <th>Company</th>
    <th>Location</th>
    <th>Dates Employed</th>
    <th>Title/Duties</th>
  </tr>
  <tr>
    <td>Mercury Systems</td>
    <td>Hudson, NH</td>
    <td>May 20, 2019 - <br>Current</td>
    <td>Continous<br> Improvement<br> Intern</td>
  </tr>
  <tr>
    <td>Manchester<br> Public Schools</td>
    <td>Manchester, NH</td>
    <td>January 2017 - <br>August 2018</td>
    <td>Para-Professional</td>
  </tr>
  <tr>
    <td>Penobscot<br>Indian Island</td>
    <td>Old Town, ME</td>
    <td>November 2015 - <br>January 2017</td>
    <td>Youth Program<br>Coordinator</td>
  </tr>
</table>

Trying to do a dotted/solid border around and between the table.

Answer 1

You must add the style of the border as the other person already said, but the order it's {size} {style} {color}.

The two main reasons your code isn't working are: You've forgotten to close the first table rule and the order of the arguments for the border rule.

Eg: border: 2px solid #FFFFFF. And you must not use the color as "#FFFFFF" (remove the quotes mark).

table,
th,
td {
  border-collapse: collapse;
  border: 2px solid #022D41;/* add the border style (solid) */
  background-color: #DAECF3;
  text-align: center;
  margin: auto;
} /* You've forgot to close this rule */

table {
  border-collapse: seperate;
  width: 2;
  background-color: #1AA6B7; /* remove the "" */
  border: 2px solid #FE424D; /* remove the "" and add the border-style */
  text-align: center;
  margin: auto; /*aligning table to the center*/
}

th {
  border: 3px solid #FE424D; /* remove the "" and add the border-style */
  background-color: "#022D41"; /* remove the "" */
  color: #DAECF3; /* you're using the same backgorund-color as the text color */
  color: #000;
}

td {
  border: 3px solid #FE424D; /* add the border style and remove the "" */
}

<table border="4">
  <tr>
    <th>Company</th>
    <th>Location</th>
    <th>Dates Employed</th>
    <th>Title/Duties</th>
  </tr>
  <tr>
    <td>Mercury Systems</td>
    <td>Hudson, NH</td>
    <td>May 20, 2019 - <br>Current</td>
    <td>Continous<br> Improvement<br> Intern</td>
  </tr>
  <tr>
    <td>Manchester<br> Public Schools</td>
    <td>Manchester, NH</td>
    <td>January 2017 - <br>August 2018</td>
    <td>Para-Professional</td>
  </tr>
  <tr>
    <td>Penobscot<br>Indian Island</td>
    <td>Old Town, ME</td>
    <td>November 2015 - <br>January 2017</td>
    <td>Youth Program<br>Coordinator</td>
  </tr>
</table>

https://developer.mozilla.org/en-US/docs/Web/CSS/border

Answer 2

Example:

.table_dark {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 14px;
    width: 640px;
    text-align: left;
    border-collapse: collapse;
    background: #311B92;
    border: 7px solid red;
}
.table_dark th {
  color: #EDB749;
  border-bottom: 1px dotted #37B5A5;
  border-right: 1px dotted #37B5A5;
  padding: 12px 17px;
}
.table_dark td {
  color: #CAD4D6;
  border-bottom: 1px dotted #37B5A5;
  border-right: 1px dotted #37B5A5;
  padding: 7px 17px;
}
.table_dark tr:last-child td {
  border-bottom: none;
}
.table_dark td:last-child {
  border-right: none;
}
.table_dark tr:hover td {
  text-decoration: underline;
}

<table class="table_dark">
  <tr>
    <th>Company</th>
    <th>Location</th>
    <th>Dates Employed</th>
    <th>Title/Duties</th>
  </tr>
  <tr>
    <td>Mercury Systems</td>
    <td>Hudson, NH</td>
    <td>May 20, 2019 - <br>Current</td>
    <td>Continous<br> Improvement<br> Intern</td>
  </tr>
  <tr>
    <td>Manchester<br> Public Schools</td>
    <td>Manchester, NH</td>
    <td>January 2017 - <br>August 2018</td>
    <td>Para-Professional</td>
  </tr>
  <tr>
    <td>Penobscot<br>Indian Island</td>
    <td>Old Town, ME</td>
    <td>November 2015 - <br>January 2017</td>
    <td>Youth Program<br>Coordinator</td>
  </tr>
</table>

Answer 3

I believe you need to add solid or dotted to the border property to make it appear. In your case, you would need:

border: solid 2px "#FE424D";

for a solid border, or

border: dotted 2px "#FE424D";

for a dotted one.