surround a div with a gradient border - css

Question

How do you surround a div with a border?
this is what I am trying to accomplish
and was done with images.
I have the sides (or top and bottom) , I can not surround the div with the gray- silver border.
[JsFiddle code:
<div class="panel-body">
<ul>
<li>Locomotives</li>
<li>Radios</li>
<li>Televisions</li>
<li>Computers</li>
<li>Monitors</li>
<li>Satellites</li>
<li>Spaceships</li>
<li>Submarines</li>
<li>Scuba Divers</li>
</ul>
</div>
]Jsfiddle2

Answer 1

Use box-shadow instead:
http://jsfiddle.net/3knyndxz/1/
.panel-body {
float: left;
padding: 30px;
background: #fff;
border-radius: 10px;
box-shadow: inset 0 0 20px #ccc;
}

Answer 2

This can be done with multiple layers of box-shadows, its tricky if you need to build some kind metal texture.
.container {
border: 1px solid #999;
height: 200px;
width: 90%;
display: flex;
justify-content: center;
padding: 20px;
}
.children {
width: 30%;
border: 1px solid #555;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
.metalone {
box-shadow: inset 0px -2px 0px 0px rgba(255, 255, 255, 0.62), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.62), inset 0px 0px 1px 1px rgba(56, 8, 8, 0.91), inset 0px 0px 0px 2px rgba(192, 121, 121, 0.8), inset 0px 0px 0px 3px rgba(152, 47, 47, 0.85), inset 0px 0px 0px 4px rgba(152, 47, 47, 0.85), inset 0px 0px 1px 5px rgba(56, 8, 8, 0.945);
}
.metaltwo {
box-shadow: inset 0px 3px 0px 0px rgba(29, 29, 29, 0.62), inset 0px 0px 1px 2px rgba(46, 46, 46, 0.91), inset 0px 0px 0px 3px rgba(255, 255, 255, 0.8), inset 0px 0px 0px 4px rgba(112, 112, 112, 0.85), inset 0px 0px 0px 5px rgba(219, 219, 219, 0.85), inset 0px 0px 1px 6px rgb(250, 250, 250);
background: black;
color: white;
}
<div class="container">
<div class="metalone children">Metal Texture one</div>
<div class="metaltwo children">Metal Texture two</div>
</div>
box-shadow.