Сегодняшним днём многие дизайны имея макеты в Photoshop’е на выходе могут вообще не иметь графики в своём составе. Всё благодаря таблице стилей CSS. Да, можно сослаться на то, что некоторые браузеры не поддерживают те или иные настройки стилей, однако большинство популярных настроек они всё-таки поддерживат и настройки границы элемента попадает в это большинство.
Для начала создадим элемент:
<style> .elem1{background: #e3ffa8;width:100px;}</style>
<div class="elem1">Элемент</div>
Теперь добавим «общую» границу (border):
<style> .elem2{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; }</style> <div class="elem2">Элемент</div>
После добавляем нижнюю границу (border-bottom):
<style> .elem3{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; border-bottom: 5px #599f61 solid;}</style> <div class="elem3">Элемент</div>
На этой ноте я подчеркну, что если border-bottom написать вперёд border, то настройки последнего будут перекрывать настройки первого. Добавим «объёма» с помощью padding’а.
<style> .elem4{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; border-bottom: 5px #599f61 solid; padding-top: 5px; padding-bottom: 8px; padding-left: 13px; padding-right: 13px;}</style> <div class="elem4">Элемент</div>
Давайте добавим border-radius.
<style> .elem5{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; border-bottom: 5px #599f61 solid; padding-top: 5px; padding-bottom: 8px; padding-left: 13px; padding-right: 13px; border-radius:15px;}</style> <div class="elem">Элемент</div>
Я думаю, не будет лишним, добавить тени.
<style> .elem6{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; border-bottom: 5px #599f61 solid; padding-top: 5px; padding-bottom: 8px; padding-left: 13px; padding-right: 13px; border-radius:15px;}
.shadow{box-shadow: inset 0 0 6px #388306; -webkit-box-shadow: inset 0 0 6px #388306; -moz-box-shadow: inset 0 0 6px #388306;}
<div class="elem6 shadow">Элемент</div>
И в завершении, укажем настройки текста. С шрифтами у меня всегда было не очень, поэтому выберите на свой вкус свойство font-family, а кроме того text-align, color и font-weight.
<style> .elem8{background: #e3ffa8;width:100px; border: 1px #56bd5e solid; border-bottom: 5px #599f61 solid; padding-top: 5px; padding-bottom: 8px; padding-left: 13px; padding-right: 13px; border-radius:15px;font-family:Georgia;text-align:center;font-weight:bold;color:#296f31;}
.shadow{box-shadow: inset 0 0 6px #388306; -webkit-box-shadow: inset 0 0 6px #388306; -moz-box-shadow: inset 0 0 6px #388306;}
<div class="elem shadow">Элемент</div>
