I am trying to insert a table in a page with the same color and want to be able to distinguish the table from the main page. I want a white border around my three columns. Here is my code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: reflexive;
background-color: #1476D9;
color: #ffffff
}
h2.solid {border-style: solid; border-radius: 15px; border-width: 10px; border-color: grey}
.custom-border {
border-color: grey;
border-width: 20px;
border-style:solid;
border-radius: 15px;
background-color: #ffffff;
}
</style>
</head>
<div class="row">
<div class="column" style="background-color:#1476D9;">
<h2>title</h2>
<p>text</p>
</div>
<div class="column" style="background-color:#1476D9;" style="color: #fffff" style="border: grey">
<h2>title</h2>
<p>text</p>
</div>
<div class="column" style="background-color:#1476D9;">
<h2>title</h2>
<p>text</p>
</div>
</div>
</html>
Thanks!
So far I have tried p.solid {border-style: solid; border-radius: 15px; border-width: 10px; border-color: white} but I am unsure if I put the code in the right place.
New contributor
kate leach is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.