Как реализовать подобного рода бордер?

Question

[Евгений Холодов]

Доброго времени суток! Появилась необходимость сделать нестандартный блок со списком и бордером вокруг текста.


Я пробовал такой подход:

div:before{
	position:absolute;
	top:0;
	right:0;
	width:90%;
	border-top:1px solid #fff;
	content:"";
}

Но в этом случае у меня отсутствует возможность сделать боковой бордер. Что можно предпринять в данной ситуации?

Answer 1

[Александр Миранович]

https://jsfiddle.net/vh2w0w38/14/

Comments

[Евгений Холодов]

Спасибо за наглядный пример!)

[Gortyser]

А если в качестве фона используется изображение, то как выкручиваться?

[Евгений Холодов]

Gortyser: цель была как раз чтобы в качестве фоне не использовать изображение

Answer 2

[iBird Rose]

как вариант сделать 2 отдельных блока.
один весь по кругу с белым бордером.
второй внутри с таким же серым фоном. и margin-left: - 60px;

Answer 3

[Владислав Бойченко]

Вот так: https://jsfiddle.net/kyc9qt1m/