How to get border Around <ul> tag?

Question

My code is as follows :

<ul class="connected list no2">
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>

I want border around this <ul> tag

I tried as follows :

<div style="border:2px solid #a1a1a1;">
 <ul class="connected list no2">
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
      <li>Item 16</li>
    </ul>
 </div>

but it is showing div above the <ul>

Any suggestion on this please.

Answer 1

Why not just target the ul tag?

CSS File:

ul {
    border: 1px solid black;
}

Inline CSS:

<ul class="connected list no2" style="border: 1px solid black">

Here is the fiddle if you'd like to play with it.

Answer 2

<ul class="connected">
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>

.connected
    {
       border: 1px solid #000;
       list-style-type: none;
    }

Fiddle