• Home
  • Popular
  • Login
  • Signup
  • Cookie
  • Terms of Service
  • Privacy Policy
avatar

Posted by User Bot


26 Mar, 2025

Updated at 20 May, 2025

Border radius for first and last items in CSS drop down menu

I have a CSS drop down menu with rounded corners that works fine. The issue I'm tackling is that when I hover over menu items and they get highlighted, I need the first and last item to also have rounded corners. Right now, when the menu opens up, it looks fine but when I hover over an item, it doesn't have rounded corners. This is not an issue for items that are in the middle but the first and last items don't look quite right -- see image below:

enter image description here

Here's my code:

/* The container 
 - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
 
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  border-width: 0;
  border-radius: 0.35rem;
  background-color: #DD4746;
  min-width: 10rem;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right: 3rem;
}
 
/* Links inside the dropdown */
.dropdown-content a {
  color: #FFF;
  padding: 8px 16px;
  font-size: 0.9rem;
  text-decoration: none;
  display: block;
   &:hover {
     background-color: #333;
  }
}

.show-dropdown {
  display: block;
}

.avatar {
   display: flex;
   background-color: #333;
   width: 40;
   height: 40;
   border-width: 2px;
   border-color: #333;
   border-style: solid;
   border-radius: 50%;
   overflow: hidden;
   justify-content: center;
   margin-left: 200px;

   img: {
      width: 100%;
   }
}

   

      
   

   

      Profile
      Settings
      Logout