无法在DT上创建border-radius

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/