title: Turning a Link Into a Little Circle With CSS
body: <p>I have the following html code: </p>
  
  <pre><code>&lt;ul class="smenu"&gt;
  &lt;li class="smenuitem"&gt;&lt;a href="http://ux.stackexchange.com/"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class="smenuitem"&gt;&lt;a href="http://area51.stackexchange.com/"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class="smenuitem"&gt;&lt;a href="http://www.webmasters.stackexchange.com/"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'm trying to get the links to look like round circles with a width of 25px and a height of 25px, so I applied the following css:</p>
  
  <pre><code>li.smenuitem a, li.smenuitem a:link:hover, li.smenuitem a:visited, li.smenuitem a:visited:hover, {
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 25px;
  background-color: #0000ff;
  }
  </code></pre>
  
  <p>However, the links did not appear at all. They were not 25px by 25px, and they did not have rounded corners (they weren't in a circular shape). Can anyone tell me what I'm doing wrong?</p>