Creating a border with border-radius for Bootstrap 4 tables

I am currently working on improving the design of a table in Bootstrap 4. Since it's a Node application, we have chosen to work with handlebars (.hbs). With CSS I can alter the width of the table, but I haven't managed to create a border or the rounded corners needed to improve the design. I am using CDN from https://cdn.datatables.net/ I am unsure if it is affecting this in any way.

Why isn't it working as expected? Do I have to write the CSS a bit differently while using the handlebars, or is it any simpler errors on my behalf?

I am including a bit of the head. But I am leaving out The CDN for Bootstrap and jQuery:

HBS / (HTML)

  <!-- DataTables CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
    <!-- JS -->
    <script src="../public/javascripts/dataTables.js"></script>
    <title>Continuous integration Test Results</title>
</head>

<body id="resultsPage" onload>
      <header>
    </header>
    <main>
    <div class="container-fluid">
        <div id="resultsTable">
            <div class="table-responsive">
                <table class="table table-striped table-sm table-bordered">
                    <thead id="semiBlackHead">
                    <tr>
                        <th class="col-md-5ths col-xs-6">Project</th>
                        <th class="col-md-5ths col-xs-6">Last push</th>
                        <th class="col-md-2ths col-xs-6">Bugs</th>
                        <th class="col-md-2ths col-xs-6">Style errors</th>
                        <th class="col-md-5ths col-xs-6">Details</th>
                    </tr>
                    </thead>
                    <tbody id="bleachedBody">
                    {{{insertRow}}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</main>

CSS

#semiBlackHead {
    background: rgba(0, 0, 0, 0.8) !important;

}
#bleachedBody {
    background-color: rgba(255, 255, 255, 0.9);
    background-size: cover;
    text-align: center;
    background-blend-mode: soft-light;

}
    #resultsTable {
        border-radius: 25px !important;                       /* not working */
        border-width: 5px !important;                        /* not working */
        border: rgba(0, 128, 255, 0.9) !important;          /* not working */
        width: 90%;  /*Tested and working as expected: */
        padding-top: 1%;
        margin: 0px auto;
        float: none;
    }
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after {
    padding: 5px;
}

.dataTables_wrapper .mdb-select {
    border: none;
}

.dataTables_wrapper .mdb-select.form-control {
    padding-top: 0;
    margin-top: -1rem;
    margin-left: 0.7rem;
    margin-right: 0.7rem;
}

.dataTables_length label {
    display: flex;
    justify-content: left;
}

.dataTables_filter label {
    margin-bottom: 0;
}

.dataTables_filter label input.form-control {
    margin-top: -0.6rem;
    padding-bottom: 0;
}

table.dataTable {
    margin-bottom: 3rem !important;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 0;
}

Solution

You need to change border to border-color and add border-style

#resultsTable {
  border-radius: 25px !important;
  border-width: 5px !important;
  border-style: solid !important;
  border-color: rgba(0, 128, 255, 0.9) !important;
  width: 90%;  /*Tested and working as expected: */
  padding-top: 1%;
  margin: 0px auto;
  float: none;
}

or combine them into one:

border: 5px solid rgba(0, 128, 255, 0.9) !important;