.border_css {
position:relative;
background: #B540B1 ;
padding:10px 35px 10px 10px;
margin:0 0 15px 0;
border: 1px solid #fff;
font-size:16px;
color: #fff;
line-height:18px;
border-radius: 5px;
text-align: center;
width: 92%;
}
Это вставляем в ваши стили, например style.css
Чтобы получить результат в нужном месте пишем:
<div class="border_css">
Ваш текст и картинки и прочее...
</div>
Расшифровываю код:
position:relative - положение элемента относительно на исходном месте. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. То есть становится подвижным
background: - фон
padding:10px 35px 10px 10px; - отступы с 4х сторон для текста
margin:0 0 15px 0; - величина отступа со всех 4х сторон
border: 1px solid #fff; - рамка 1 пиксель, сплошная белого цвета
font-size:16px; - размер текста 16 пикселей
color: #fff; - текст белого цвета
line-height:18px; - межстрочный интервал
border-radius: 5px; - закругление с 4 сторон вашей рамки 5 пикселей
text-align: center; 5px; - текст по центру)
width: 92%; - ширина всей рамки и ее содержимого 92% от всей ширины страницы