Voloshin-Sergei/css

## css
*{padding:0;margin:0;border:0;}
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
:focus,:active{outline:none;}
a:focus,a:active{outline:none;}
nav,footer,header,aside{display:block;}
html,body{height:100%;width:100%;font-size:100%;line-height:1;font-size:14px;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display:none;}
button{cursor:pointer;}
button::-moz-focus-inner{padding:0;border:0;}
a,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul li{list-style:none;}
img{vertical-align:top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}
/*--------------------*/
.mine__block {
	width: 400px;
	height: 400px;
	margin:100px auto;
	position: relative;
	border: 1px solid rgba(0,0,0,.0);
}
.box_rect {
	width: 300px;
	height: 300px;
	margin:50px;
	border: 1px solid #000;
	z-index: 1;
}
.box__circle1 {
	width: 100px;
	height: 100px;
	position: absolute;
	top:0;
	left: 0;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #fff;
	z-index: 10;
}
.box__circle2 {
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: 0;
	left: 0;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #fff;
	z-index: 10;

}
.box__circle3 {
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: 0;
	right: 0;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #fff;
	z-index: 10;
}
.box__circle4 {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	right: 0;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #fff;
	z-index: 10;
}
.box__rect-rect1 {
	width: 400px;
	height: 49px;
	position: absolute;
	top:0;
	left: 0;
	background-color: #fff;
	z-index: 12;
}
.box__rect-rect2 {
	width: 49px;
	height: 400px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	z-index: 12;
}
.box__rect-rect3 {
	width: 49px;
	height: 400px;
	position: absolute;
	top: 0;
	left: 351px;
	background-color: #fff;
	z-index: 12;
}
.box__rect-rect4 {
	width: 400px;
	height: 49px;
	position: absolute;
	top:351px;
	left: 0;
	background-color: #fff;
	z-index: 12;
}

## html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=devise-width, inital-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
	<title>Document</title>
</head>
<body>
	<div class="mine__block">
		<div class="box_rect">
			<div class="text">
				<p>Квадрат</p>
				<p></p>
				<p></p>
			</div>
		</div>
		<div class="box__circle1"></div>
		<div class="box__circle2"></div>
		<div class="box__circle3"></div>
		<div class="box__circle4"></div>
		<div class="box__rect-rect1"></div>
		<div class="box__rect-rect2"></div>
		<div class="box__rect-rect3"></div>
		<div class="box__rect-rect4"></div>
	</div>
</body>
</html>
	*{padding:0;margin:0;border:0;}
	,:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
	:focus,:active{outline:none;}
	a:focus,a:active{outline:none;}
	nav,footer,header,aside{display:block;}
	html,body{height:100%;width:100%;font-size:100%;line-height:1;font-size:14px;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
	input,button,textarea{font-family:inherit;}
	input::-ms-clear{display:none;}
	button{cursor:pointer;}
	button::-moz-focus-inner{padding:0;border:0;}
	a,a:visited{text-decoration:none;}
	a:hover{text-decoration:none;}
	ul li{list-style:none;}
	img{vertical-align:top;}
	h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}
	/--------------------/
	.mine__block {
	width: 400px;
	height: 400px;
	margin:100px auto;
	position: relative;
	border: 1px solid rgba(0,0,0,.0);
	}
	.box_rect {
	width: 300px;
	height: 300px;
	margin:50px;
	border: 1px solid #000;
	z-index: 1;
	}
	.box__circle1 {
	width: 100px;
	height: 100px;
	position: absolute;
	top:0;
	left: 0;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #fff;
	z-index: 10;
	}
	.box__circle2 {
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: 0;
	left: 0;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #fff;
	z-index: 10;

	}
	.box__circle3 {
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: 0;
	right: 0;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #fff;
	z-index: 10;
	}
	.box__circle4 {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	right: 0;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #fff;
	z-index: 10;
	}
	.box__rect-rect1 {
	width: 400px;
	height: 49px;
	position: absolute;
	top:0;
	left: 0;
	background-color: #fff;
	z-index: 12;
	}
	.box__rect-rect2 {
	width: 49px;
	height: 400px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	z-index: 12;
	}
	.box__rect-rect3 {
	width: 49px;
	height: 400px;
	position: absolute;
	top: 0;
	left: 351px;
	background-color: #fff;
	z-index: 12;
	}
	.box__rect-rect4 {
	width: 400px;
	height: 49px;
	position: absolute;
	top:351px;
	left: 0;
	background-color: #fff;
	z-index: 12;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta name="viewport" content="width=devise-width, inital-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
	<title>Document</title>
	</head>
	<body>
	<div class="mine__block">
	<div class="box_rect">
	<div class="text">
	<p>Квадрат</p>
	<p></p>
	<p></p>
	</div>
	</div>
	<div class="box__circle1"></div>
	<div class="box__circle2"></div>
	<div class="box__circle3"></div>
	<div class="box__circle4"></div>
	<div class="box__rect-rect1"></div>
	<div class="box__rect-rect2"></div>
	<div class="box__rect-rect3"></div>
	<div class="box__rect-rect4"></div>
	</div>
	</body>
	</html>