Question 190305 in CSS Question posted in
Some basic documentation can be found here.

Css – How to rounded border bottom of an element?

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

Tags:

2

Answers


  1. 0

    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:

    a {
  position: relative;
  display: inline-block;
  padding: 2em 0.5em;
  text-decoration: none;
}


a::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);
}
    <a href="#">Large Link</a>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search