Как сделать div с границей, «обволакивающей» объекты внутри него?
А это вообще реально? Что у инлайновых, что у блочных элементов граница — прямоугольник. А элементов с многоугольной формой нет. Если только на canvas/svg рисовать
Ответ: 
Demo, 
Html:
<div id="main">
  <div class="red"><div class="content">Red</div></div>
  <div class="green"><div class="content">Green</div></div>
  <div class="blue"><div class="content">Blue</div></div>
  <div class="black"><div class="content">Black</div></div>
</div>
