Как организовать такую рамку?

Question

[CapitanFreeloader]

Версткой занимаюсь давно, но с таким столкнулся впервые.

Интересует белая рамка, как ее сделать не могу понять. Вкладки организовал вот так:

<ul class="nav nav-tabs insets">
                <li class="active inset"><a data-toggle="tab" href="#buy-bitcoin">Купить Bitcoin</a></li>
                <li class="inset"><a data-toggle="tab" href="#trade-bitcoin">Продать Bitcoin</a></li>
                <li class="inset"><a data-toggle="tab" href="#order-bitcoin">Оплатить счет Bitcoin</a></li>
              </ul>

              <div class="tab-content">
                <div id="bye-bitcoin" class="tab-pane fade in active">
                  <h3>HOME</h3>
                  <p>Some content.</p>
                </div>
                <div id="trade-bitcoin" class="tab-pane fade">
                  <h3>Menu 1</h3>
                  <p>Some content in menu 1.</p>
                </div>
                <div id="order-bitcoin" class="tab-pane fade">
                  <h3>Menu 2</h3>
                  <p>Some content in menu 2.</p>
                </div>
              </div>

Гугл не помог

Comments

[Nwton]

почему бы не использовать ::after?

Answer 1

[Олег]

Как вариант https://jsfiddle.net/mz9t7gcn/1/
табы не стал ровнять. Но само поле, что бы зазор был между обводкой и вкладкой псевдо сделаны.

Comments

[CapitanFreeloader]

Огромное спасибо!

[Олег]

CapitanFreeloader: еще для :after z-index:-1; добавь

Answer 2

[Кемал Демирель]

Оберни все в контейнер, задай ему относительное позиционирование, а лишкам абсолютное, спозиционируй как тебе нужно.
Сделай рамку контейнеру и добавь прозрачность.

UPD: Даже прозрачность не нужно добавлять. Просто скругляешь бордюры, делаешь для контейнера падинг и радуешься.