I've been trying to give the outer corners of tables a rounded appearance in HTML/CSS, but I can't seem to get the border-radius property to work properly.
After inspecting the elements in Chrome's computed section, I noticed that the elements have a default border of 3, which is encroaching into the rounded corners. When I try adding "border: 0"; it doesn't make any difference. I suspect that the browser may be applying a default border.
I would really appreciate any suggestions or tips on how to solve this issue.
Thank you.
* {
box-sizing: border-box;
}
h1 {
color: rgb(11, 8, 165);
text-align: center;
margin-bottom: 80px;
}
h2 {
color: rgb(5, 59, 41);
text-align: center;
}
body {
background-color: rgb(226, 220, 176);
}
.firstPara p {
text-align: center;
}
table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
border-radius: 15px;
overflow:hidden;
perspective: 1px;
border: 0px;
}
.univeralSelector {
color: rgb(211, 21, 21);
}
table thead tr th {
background-color: rgb(11, 134, 93);
color: white;
padding: 12px 15px;
border: 3px black solid;
}
table tbody tr td {
border: black solid;
padding: 12px 15px;
font-size: 0,9rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></head&
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles.css">
<title>Common CSS Properties</title>
</head>
<body>
<header><h1>Common CSS Properties</h1></header>
<h2>Different Types of Selectors</h2>
<div class="firstPara">
<p>Selectors are used to style HTML elements according to their type and/or attributes.
<br>
All markups can be selected with the universal selector: "
<span class="univeralSelector">*</span> "{
/* declarations here */
}
</p>
</div>
<table>
<thead>
<tr>
<th>Select by</th>
<th>Syntax</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Type</td>
<td>element-name {
/* declarations here */}</td>
<td>
p {
text-align: center;
color: red;}</td>
</tr>
<tr>
<td>Attribute</td>
<td>'id' (in the HTML file) '#' (in CSS file)
<br>'class' (in HTML file) '.' (in CSS file)</td>
<td>#para1 {
text-align: center;
color: red;
}
<br>
.center {
text-align: center;
color: red;}</td>
</tr>
</tbody>
</table>
<h2>CSS Units</h2>
<table>
<thead>
<tr>
<th>Absolute Units</th>
<th>Relative Units</th>
</tr>
</thead>
<tb>
<td>
<ul>
<li>
em: Property size relative to property size of direct parent element (most common)
</li>
<li>
rem: Property size relative to property size of direct root element
</li>
<li>
vw: Percentage based on width of screen
</li>
<li>
vh: Percentage based on height of screen
</li>
</ul>
</td>
<td>
<ul>
<li>px: Pixels (most common)</li>
<li>pt: Points</li>
<li>mm: Millimeters</li>
</ul>
</td>
</tb>
</table>
</body>
</html>