Как заокруглить текст, разместить текст в овальном боксе

: Веб Мастер; Как сделать ? (CSS / HTML / PHP / MySQL / JS); 21 февраля 2018

Однажды пришлось разместить текст в овальном боксе. Решил записать как это сделать.

Напишем css

div.text {
    background: none repeat scroll 0 0 rgba(68, 108, 171, 0.1);
    width: 99%;
    border: 1px solid rgba(59, 59, 59, 0.5);
    border-radius: 20px;
    margin: 10px 0;
    padding: 1px;
    position: relative;
}
div.text .box {
	margin: 10px;
    text-align: center;
}

Теперь код html

<div class="text">
<p class="box">Предлагаю Вам заказать сайт по оптимальной цене. Посетив разработанный мною сайт, у клиентов сложиться правильное впечатление о Вашем продукте или услуге, что приведет к увеличению прибыли.</p>
</div>

Результат

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

Второй вариант

Напишем css

div.textbox {
	background: none repeat scroll 0 0 rgba(68, 108, 171, 0.1);
    width: 99%;
    border: 1px solid rgba(59, 59, 59, 0.5);
    border-radius: 20px;
    margin: 10px 0;
    padding: 1px;
    position: relative;
}
div.textbox .bg {
    padding: 20px 0px 0px 10px;
}
div.textbox .title {
    font-size: 20px;
    background: none repeat scroll 0 0 rgba(68, 108, 171);
    color: #ffffff;
    font-weight: bold;
    left: 20px;
    padding: 7px 7px;
    position: absolute;
    top: -32px;
    border: 1px solid rgba(59, 59, 59, 0.5);
    border-radius: 20px;
}

Теперь код html

<div class="textbox">
<p class="title ">Заказать сайт. Создание сайтов по оптимальной цене</p>
<p class="bg"><img src="images/palexa.png" alt="" style="float: left; margin-right: 10px; margin-left: 0px;" /><strong>Предлагаю Вам заказать сайт по оптимальной цене. Посетив разработанный мною сайт, у клиентов сложиться правильное впечатление о Вашем продукте или услуге, что приведет к увеличению прибыли.</strong></p>
</div>

Результат

Заказать сайт. Создание сайтов по оптимальной цене

Конечно можно поиграться с css для достижения других результатов отображения, но суть думаю ясна