title: How to Fix Rounded Borders on Text that is Wrapped
body: <p>I have a table in my application (generated dynamically) that has 3 columns. The cells where the text is a too long, it wraps around which is fine except the rounded borders now look bad.</p>
  
  <p><img src="https://i.stack.imgur.com/tWLt3.png" alt="enter image description here"></p>
  
  <p>Currently, my table is wrapped in a <code>DIV</code> with an id set as <strong>item-list</strong> and the CSS is as follows:</p>
  
  <pre><code>#item-list {
     text-align: center;
  }
  
  
  #item-list table {
  margin: auto auto; 
  }
  
  #item-list td {
  padding: 10px;
  text-align: center;
  }
  
  #item-list a {
  font-size: 0.8em;
  color: #FFF;
  margin: 10px;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  padding: 4px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #1a546a;
  text-decoration: none;
  font-weight: bold;
  }
  
  #item-list a:hover {
  background-color: #8f2525;
  }
  </code></pre>
  
  <p>My question is, is there a way using CSS to make the wrapped text still be rounded on all edges?</p>
  
  <p><strong>[Disclaimer]</strong> My expertise is in PHP. CSS is a skill where I know enough to usually accomplish what I need to do, but not much beyond amateurish.</p>