Can't make border-radius on DT - html

Question

Why can't I make a border-radius on my <dt>?
http://thistedbolig.konggulerodhosting.dk/
What can I change? I really need to make the border-radius. I have tried many things, but none of them work. I hope someone here can help me so I can finish the project.
CSS:
.dropdown dt { border-radius: 10px 0px 0px 10px;}
HTML:
<div class="small-6 medium-3 columns">
<dl class="dropdown">
<dt>
<a href="#0">
<span title="city" class="hida " ><img src="assets/images/search/placeholder.svg" alt="" style="width:20px; height:20px; margin-right:10px;">Vælg en by</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Thisted" />Thisted</li>
<li>
<input type="checkbox" value="Snested" />Snested</li>
<li>
<input type="checkbox" value="Vesløs" />Vesløs</li>
<li>
<input type="checkbox" value="Nors" />Nors</li>
<li>
<input type="checkbox" value="Sennels" />Sennels</li>
<li>
<input type="checkbox" value="Østerild" />Østerild</li>
</ul>
</div>
</dd>
</dl>
</div>

Answer 1

You need to set the border on the a tag in order to apply a border
Thus:
Update:
.dropdown dt {
height: 20px;
line-height: 20px;
display: block;
background: black;
}
.dropdown dt a {
padding: 8px 20px 5px 10px;
overflow: hidden;
border-radius: 10px 0px 0px 10px;
}
should work!
line-height will center the text vertically!
Check this jsfiddle: https://jsfiddle.net/9tgj0n5k/1/