Граница двумя цветами

Стандартными возможностями CSS сделаем border - границу из двух разных цветов с помощью параметров outline и border, а также сделаем эти две границы круглыми.

Разметка HTML и CSS

Простой контейнер:

<div class="two_borders">Контейнер с двумя разноцветными границами.</div>

А вот стиль для него:

.two_borders{
    outline:3px solid #f00;
    border:3px solid #0000FC;

    margin: 30px auto;
    padding:5px;

    background:#fff;

    width:200px;
    height:70px;
}

Теперь закруглим углы (учтем, что внутренний радиус должен быть меньше наружного - чтобы не было просветов).
В этот раз нам необойтись без еще одного DIV.

<div class="radialOuter">
    <div class="radialInner">
        Контейнер с двумя разноцветными круглыми границами.
    </div>
</div>

И два класса для него:

.radialOuter {
    width:200px;
    height:100px;

    border-radius:10px;
    border:3px solid #f00;

    margin: 0 auto 10px;
}
             
.radialInner {
    width:174px;
    height:74px;

    border-radius:7px;
    border:3px solid #333;

    background:#fff;

    padding:10px;
}

Вот и всё, ничего нового, но может оказаться полезным.
СКАЧАТЬСкачек: 163
818 b
Кто скачал?

ДЕМОПосмотреть
пример