Weired thing appeares using border-radius priperty


#1

Hi!
I’ve just started practicing css and I stumbled uppon this weird thing. I’m trying to make a navigation from links wraped in li tegs, so I whant them to look like buttont with rounded corners. But when I apply border-radius weird additional part appears next to my “button”. I just can’t understand why this is happening.
This is how it lookes like:
image

  <div class="bigphoto">
   
     <div>
     <h1>Учебно-научная станция Валаам</h1>

      <ul>
        <li><a href="#about">О Станции</a></li>
        <li><a href="#practice">Практика<a/></li>
        <li><a href="#projects">Научные проекты</a></li>
      </ul>

     </div>
     
     <p class="caption">
     Станция Валаам в летний период
     </p>
     
    </div>
.bigphoto ul li{
  display: block;
  padding: 5px;
  
}

.bigphoto ul li a {
 color: rgba(0,0,0,1);
 font-weight: bold;
 background-color: white;
 opacity: 0.55;
 padding: 2px;
 border-radius: 4px; 
 
  }

#2

li is a block already, so this rule can be moved to the anchor.


#3

Thank you!
Had to remove bullet points that appeared after, but it worked!