Weired thing appeares using border-radius priperty


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:

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

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

     <p class="caption">
     Станция Валаам в летний период
.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; 


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


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