Как в semantic ui сделать рамку?

Question

Виктор Насонов @kvonosan

HTML

Как в semantic ui сделать рамку?

Как сделать рамку вокруг Репутации с картинками как вокруг аватара с именем? Вот код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Peoples - социальная сеть</title>
    <link rel="stylesheet" href="/css/app.css"/>
</head>
<body>

<div class="ui vertical inverted sidebar menu">
    <a class="item" href="http://peoples.peshkova-natalia.ru">Дом</a>
    <a class="item" href="#">Баланс</a>
    <a class="item" href="http://peoples.peshkova-natalia.ru/settings_menu">Настройки</a>
	<a class="item" href="#">Уведомления</a>
    <a class="item" href="#">Справка</a>
	<a class="item" href="#">Уведомления</a>
    <a class="item" href="http://peoples.peshkova-natalia.ru/logout">Выход</a>
	<hr>
	<a class="item" href="#">Общение</a>
    <a class="item" href="#">Лента</a>
	<a class="item" href="#">Контент</a>
    <a class="item" href="#">Люди</a>
	<a class="item" href="#">Чаты</a>
    <a class="item" href="#">Форумы</a>
	<a class="item" href="#">Вопросы</a>
    <a class="item" href="#">Объявления</a>
	<a class="item" href="#">Блоги</a>
    <a class="item" href="#">Файлы</a>
	<a class="item" href="#">Товары</a>
    <a class="item" href="#">Источники</a>
</div>

<div class="pusher">

    <div class="ui vertical teal inverted center aligned segment">
        <div class="ui container">
            <div class="ui large secondary inverted menu">
                <a class="toc item">
                    <i class="sidebar icon"></i>
                </a>
				<h3 class="toc item">PEOPLES - социальная сеть.</h3>
				<div class="item right floated"><button class="ui button">^НАВЕРХ</button></div>
            </div>
        </div>
    </div>
	
	<div class="ui stackable centered grid">
		<div style="margin-top:40px;" class="row">
			<div style="border:5px solid grey;padding-top:10px;padding-bottom:10px;" class="column three wide">
				<img class="ui centered small image" src="/storage/avatars/avatar.png">
				<h3 style="text-align:center;">Виктор Насонов</h3>
				<h3 style="text-align:center;margin-top:-20px;"><b>kvonosan</b></h3>
			</div>
			<div class="column wide">
				<h2 class="ui row teal header" style="margin-left:60px;">Репутация</h2>
			</div>
			<div style="margin-top:40px;" class="column two wide">
				<img class="ui tiny spaced image" src="/images/kot.jpg">
				<h3 style="margin-left:30px;margin-top:0px;">Кот</h3>
				<h3 style="margin-left:30px;margin-top:0px;">0</h3>
			</div>
			<div style="margin-top:40px;" class="column two wide">
				<img class="ui tiny spaced image" src="/images/kot.jpg">
				<h3 style="margin-left:30px;margin-top:0px;">Кот</h3>
				<h3 style="margin-left:30px;margin-top:0px;">0</h3>
			</div>
			<div style="margin-top:40px;" class="column two wide">
				<img class="ui tiny spaced image" src="/images/kot.jpg">
				<h3 style="margin-left:30px;margin-top:0px;">Кот</h3>
				<h3 style="margin-left:30px;margin-top:0px;">0</h3>
			</div>
			<div style="margin-top:40px;" class="column two wide">
				<img class="ui tiny spaced image" src="/images/kot.jpg">
				<h3 style="margin-left:30px;margin-top:0px;">Кот</h3>
				<h3 style="margin-left:30px;margin-top:0px;">0</h3>
			</div>
			<div style="margin-top:40px;" class="column two wide">
				<img class="ui tiny spaced image" src="/images/kot.jpg">
				<h3 style="margin-left:30px;margin-top:0px;">Кот</h3>
				<h3 style="margin-left:30px;margin-top:0px;">0</h3>
			</div>
		</div>
	</div>

</div>
<script src="/js/app.js"></script>
</body>
</html>

Посмотреть можно тут: https://screenshots.firefox.com/yP2uMnFoFPCCNuvU/p...