Почему border принимает значение цвета у блока ?

Question

[Александр Гамов]

Есть два блока cont1 и cont2 с небольшим наложением

#cont1{
	margin: 205px auto 0 auto;
	width: 625px;
	height: 150px;
	.radius(41px);
	position: relative;
	background:rgba(175, 219, 55, .9);
	border: 15px solid rgba(255, 255, 255, .5); !!!
}
#cont2{
	margin: -41px auto 0 auto;
	width: 625px;
	height: 370px;
	background: rgba(84, 178, 209, .9);
	.radius(41px);
}

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

Решение: Задача выполнена через box-shadow

box-shadow:0px 0px 0px 15px rgba(255, 255, 255, 0.5);

Answer 1

[friogenn]

border рисуется внутри своего блока.
Чтобы было как "в идеале" можно вместо border использовать outline.

Comments

[Александр Гамов]

Помогло, но пропало скругление, оно и понятно. Чем вернуть скругление бордеру ? Есть мысль делать через 3 box-shadow, но этот вариант мне не нравится.

[Александр Гамов]

Либо через два дива, что тоже не хочу )

Answer 2

[Юрий Лобанов]

codepen.io/iiil/pen/ynsgm

Comments

[Александр Гамов]

@iiil То что нужно, спасибо )

[Юрий Лобанов]

@slowdream да, но это только альтернативное решение, а ответ на Ваш вопрос, в точности, как Вы спрашивали, дал @friogenn. border, как и inset box-shadow рисуется внутри блока, соответственно бордер-то просвечивает, но под ним у нас бэк блока.