Сверстать border почтовый конверт

#html #css

Есть какая-то возможность сверстать такой border или тут только перекрывать фон формой? 


    

Ответы

Ответ 1

Для тех кому интересно. 



* {
	margin: 0px;
	padding: 0px;
}

.clearfix {
	content: '';
	display: table;
	clear: both;
}

.form__wrapper {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 540px;
	height: 265px;
	margin: 0 auto;
	padding: 10px;
	background-color: #fff;
	border-radius: 10px;

	background-image: repeating-linear-gradient(135deg, #f02755 0px, #f02755 10px, 
																													 #fff 10px, #fff 20px, 
																													 #55a5d6 20px, #55a5d6 30px, 
																													 #fff 30px, #fff 40px);
}

.main-form {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0 35px;
	padding-top: 33px;
	background-color: #fff;
	border-radius: 10px;
}

.main-form input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 163px;
	margin-bottom: 14px;
	padding: 10px 0;
	border: none;
	border-bottom: 1px solid #dedede;
	box-shadow: 0 1px 0 rgba(236, 236, 236, 1),
							inset 0 -1px 0 rgba(236, 236, 236, 1);
	text-transform: uppercase;
	color: #064f7a;
	outline: none
}

.main-inputs,
.secondary-inputs {
	width: 50%;
}

.main-inputs {
	float: left;
}

.secondary-inputs {
	float: right;
}

*::-webkit-input-placeholder {
	color: #064f7a;
	opacity: 1;
}

*:-moz-placeholder {
	color: #064f7a;
	opacity: 1;
}

*::-moz-placeholder {
	color: #064f7a;
	opacity: 1;
}

*:-ms-input-placeholder {
	color: #064f7a;
	opacity: 1;
}

	

		

			
			
			
		
		

			
			
			
		
	



Ответ 2

Для border можно задать изображение: 
http://css-live.ru/articles-css/razbiraemsya-s-border-image-iz-css3.html
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator

Поддерживается неплохо, не работает в IE10-:
https://caniuse.com/#search=Border-image