How to get this border style?

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.

Because you’ve applied them at the bottom left and right

The blue under the link is a seperately drawn shape, so for example using the ::after pseudo-element on the links:

1 Like