How do I get that curve around the edges?
Border radius on the top right and left corners of the blue shape.
You have to do a workaround to get that style.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 6rem 6rem 6rem;
}
.text {
width: 5rem;
text-align: center;
}
.border {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background: #000;
height: 7px;
width: 5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="text">First Name
<div class="border"></div></div>
<div class="text">First Name
<div class="border"></div></div>
<div class="text">First Name
<div class="border"></div></div>
<div>
</body>
</html>
Result:
Change the color of border to blue and thickness by changing height.
hope this helps,
regards,
Abhishek
1 Like
.tab-border {
border-bottom: 5px solid #31399C;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
<div id="tabs">
<span class="tab-border">First Name</span>
<span class="tab-border">Last Name</span>
<span class="tab-border">Company Name</span>
</div>
I did this and it curves the border up, not down.
