Roman Grinberg

.circle {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  border-radius: 50%;
  border: 30px solid #f8d1d3;
}

UPD: Также можно сделать и с помощью box-shadow. Для этого надо в коде выше border заменить на это:
box-shadow: 0 0 0 30px #f8d1d3;

Это вкладки. Вот урок как это сделать, вам только дизайн поменять надо будет под свой, и всё.

Это не таблицы, и не hr, а просто блоки.

<div class="nav_top">Text</div>
<div class="nav_bottom">Text 2</div>

* {
    padding: 0;
    margin: 0;
}
.nav_top {
    height: 50px; /* Для примера */
    width: 100%;
    background-color: #000000; /* Для примера */
}
.nav_bottom {
    height: 60px; /* Для примера */
    width: 100%;
    background-color: #4f54f5; /* Для примера */
}

Вот пример: JSFiddle

Это называется CSS Tooltip. Вот видео-урок как это делается.