Как сделать обводку с отступом (см.)?

как-то так. ширину обводки падингом регулируй

<style>

.btn123 {

	background-clip: content-box;

	background-color: red;

	border: 1px solid red;

	border-radius: 15px;

	color: white;

	font-weight: bold;

	margin: 0 auto;

	padding: 2px;

	text-align: center;

	text-transform: uppercase;

	width: 150px;

}

.btn123 span {

    display: block;

    padding: 5px 10px;

}

</style>

<div class="btn123"><span>Zapisatsa</span></div>

Это готовая кнопка, спасибо.

А если нужна рамка для изображения?

можно и для картинки, почитай тут про свойство css для бордера http://htmlbook.ru/css/background-clip

Почти получилось с таким кодом:

.ramka {

background-clip: content-box;

border: 1px solid;

border-color: #4AC2C1;

border-radius: 30px;

padding: 5px;

width: 230px;

heigth: 50px;

position: relative;

z-index: 1;

}

Но отступы от картинки кнопки не равномерны. Как немного опустить кнопку или "поднять" обводку снизу?

<button class="btn">

<span>Записаться</span>

</button>

// --------------------------------------------------------------

.btn {

padding: 2px;

background-color: aqua;

background-clip: content-box;

color: white;

text-transform: uppercase;

font-weight: bold;

letter-spacing: .3rem;

border-radius: 25px;

border: 1px solid #53d8d8;

}

.btn span {

padding: 10px;

display: block;

border: 1px solid black;

border-radius: 25px;

}

Мой код верный, только ошибка была в слове height.

.ramka {

background-clip: content-box;

border: 1px solid;

border-color: #4AC2C1;

border-radius: 30px;

padding: 5px;

width: 230px;

height: 50px;

position: relative;

z-index: 1;

}