Currently diving into the world of Web Development, I find myself tackling the CSS part. My latest challenge involves adding a bottom border to an element, but no matter what I try, the border just won't show up. I've scoured resources for solutions, but nothing seems to work. If anyone could lend me a hand with this, I'd greatly appreciate it.
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="card borderblue">
<div class="borderblue">
<img class="avatar" src="images/traffy.jpg" alt="Trafalgar Law from the Series One Piece">
</div>
<div class="borderblue">
<h3>Trafalgar D. Water Law</h3>
<p>Surgeon of Death</p>
<h4>Devil Fruit:Ope Ope no Mi</h4>
</div>
</div>
</body>
</html>
body {
margin: 20px;
}
.avatar {
width: 150px;
}
.card {
align-items: center;
margin-left: auto;
margin-right: auto;
width: 400px;
padding: 20px;
display: flex;
justify-content: space-around;
text-align: center;
background: #ddebf8;
color: #2b2839;
border-bottom:10px solid #a491f1;
/*
black - #2b2839 (the text color)
blue - #ddebf8 (card color)
purple - #d8cefe (border color)
*/
}
.borderblue{
border: 1px dotted blue;
}