ГРАНИЦА ДВУМЯ ЦВЕТАМИ

ГРАНИЦА ДВУМЯ ЦВЕТАМИ


Стандартными возможностями 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;
}


Вот и всё, ничего нового, но может оказаться полезным.

Скачать исходник:
Скачать файл: border_two_color.rar [1004 b] (cкачиваний: 2)
0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.