-2

I am building this main nav bar, as the active/hover state I need to get the border bottom in color. My problem is how could I round the inner top corners? I understand that I could create an element, add a height, width, bg color and round it with border-radius,But I'd like to know if it is possible to make this with border-bottom.

I've attached the design so you can see what I mean. Thanks

enter image description here

Sayeh
  • 1
  • 2

2 Answers2

2

The easiest way is to use a pseudo-element such as ::after and give it a specific height. Then use borer-top-left-radius and border-top-right-radius to round the corners with the equal value of the height:

const ANCHORS = document.querySelectorAll('menu a');

ANCHORS.forEach(anchor => 
  anchor.addEventListener('click', function(element) {
    document.querySelector('.active').classList.remove('active');
    element.target.classList.add('active');
  }) 
)
a {
  position: relative;
  display: block;
  padding: 2em 0.5em;
  text-decoration: none;
}


a:hover::after,
a.active::after {
  --block-thickness: 0.5em;
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--block-thickness);
  background-color: blue;
  border-top-left-radius: var(--block-thickness);
  border-top-right-radius: var(--block-thickness);
}


/* styling for the navbar */
menu {
  list-style: none;
  display: flex;
  gap: 1em;
}
<menu>
  <li><a href="#link" class="active">Link 1</a></li>
  <li><a href="#link">Link 2</a></li>
  <li><a href="#link">Link 3</a></li>
  <li><a href="#link">Link 4</a></li>
</menu>

EDIT: To have the border only displayed on hover, you can use the :hover pseudo-selector before you use the ::after pseudo-selector. The active state is only solvable through JS and requires the usage of adding and removing a class.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
  • Thank you! it works except although I am applying to a::after it's positioning under all a's not just the hover/active one. – Sayeh Jun 21 '23 at 03:24
-1

The easiest way is using Tailwind CSS. Run below codes in the terminal of the VS CODE.

code link that is to be run in the terminal

This way you will get ready to use TAILWIND CSS.

REMEMBER:- Code snippet will not work until codes in provided image run in the terminal of the VS Code.

Main code to make the bottom of an element rounded border-2 rounded-b-lg

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/input.css">
  <title>Document</title>
</head>

<body>
  <nav class=" bg-gray-400 h-10 ">
    <ul class="flex space-x-4 mx-4">
      <li class=" hover:border-2 rounded-b-lg border-b-green-500 border-purple-700">Home</li>
      <li class=" ">Help</li>
      <li class=" ">Contact</li>
    </ul>
  </nav>
</body>

</html>
Anshu Yadav
  • 1
  • 1
  • 1
    "*The easiest way*" - OP did not tag this question with `tailwind` - Installing a fully fletched CSS library for this doesn't seems to be the easiest way – DarkBee Jun 20 '23 at 09:35
  • Much more easier than writing a lengthy code. – Anshu Yadav Jun 20 '23 at 12:10
  • Furthermore, I've tested your code and this does,'t even do what OP wants. Here is a [demo](https://play.tailwindcss.com/uzNx76Upgn?layout=horizontal), I've already removed the extra (unwanted) borders, but please have a look at OP's question and desired result. – DarkBee Jun 20 '23 at 12:29
  • thanks for the reply. My prefer is not using bootstrap or tailwind. – Sayeh Jun 21 '23 at 03:26
  • Code didn't work because you didn't follow the steps that was provided in the given link. I've understood completely by now what Sayeh was looking for and I apologise for that. – Anshu Yadav Jun 21 '23 at 14:45
  • "*Code didn't work because you didn't follow...*" - What are you on about? The demo I've linked is hosted on the [official sandbox](https://tailwindcss.com/docs/installation) of tailwind. – DarkBee Jun 22 '23 at 05:54