<html>
<body>
<div class="box">
<span class="box1"></span>
<span class="box2"></span>
<span class="box3"></span>
<span class="box4"></span>
</div>
<style>
body {
background-color: black;
}
.box {
width: 50px;
height: 50px;
border: 1px solid yellow;
margin: auto;
position: relative;
background-color: yellow;
}
.box1 {
position: absolute;
left:-1px;
top: -1px;
width: 25px;
height: 25px;
border-right: 1px solid yellow;
border-bottom: 1px solid yellow;
border-radius: 0px 0px 100% 0px;
background-color: black;
display: inline-block;
}
.box2 {
position: absolute;
left:-1px;
top: 25px;
width: 25px;
height: 25px;
border-top: 1px solid yellow;
border-right: 1px solid yellow;
border-radius: 0px 100% 0px 0px;
background-color: black;
display: inline-block;
float: left;
}
.box3{
position: absolute;
right:-1px;
top: -1px;
width: 25px;
height: 25px;
border-left: 1px solid yellow;
border-bottom: 1px solid yellow;
border-radius: 0px 0px 0px 100%;
background-color: black;
display: inline-block;
}
.box4{
position: absolute;
right:-1px;
top: 25px;
width: 25px;
height: 25px;
border-top: 1px solid yellow;
border-left: 1px solid yellow;
border-radius: 100% 0px 0px 0px;
background-color: black;
display: inline-block;
}
</style>
</body>
</html>
