Question 282157 in Html Question posted in
Some basic documentation can be found here.

Html – Is it possible to make "ul" corners round? I tried using "border-radius" but that did not work

HTML (only the code I have a problem with):

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(62, 62, 62);
  min-width: 204px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

#myMenu {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 10px;
  border: 5px solid transparent;
}
<div class="dropdown-content" id="dropdown-content">
  <ul id="myMenu">
    <li><a href="#DisplaySettings">DisplaySettings</a></li>
    <li><a href="#HTML">HTML</a></li>
    <li><a href="#JavaScript">JavaScript</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Python</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">SQL</a></li>
    <li><a href="#">Bootstrap</a></li>
    <li><a href="#">Node.js</a></li>
  </ul>
</div>

I tried using

border-radius: 10px;

but it didn’t work. I was expecting the ul to get round corners.

Tags:

2

Answers


  1. 0

    The border-radius that you use is correct.
    But you have to use a background color to the #myMenu so you can see it.

    Login or Signup to reply.
  2. 0

    You are applying border-radius: 10px; to #myMenu. However, it seems you want to apply it to .dropdown-content instead.
    Also, display: none; should be removed because this rule hides the whole content:

    .dropdown-content {
  position: absolute;
  background-color: rgb(62, 62, 62);
  min-width: 204px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;

  border-radius: 10px;
}

#myMenu {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 5px solid transparent;
}
    <div class="dropdown-content" id="dropdown-content">
  <ul id="myMenu">
    <li><a href="#DisplaySettings">DisplaySettings</a></li>
    <li><a href="#HTML">HTML</a></li>
    <li><a href="#JavaScript">JavaScript</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Python</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">SQL</a></li>
    <li><a href="#">Bootstrap</a></li>
    <li><a href="#">Node.js</a></li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search