*,
*:before,
*:after {
    box-sizing: border-box;
}

.brackets {
    width: 400px;
    height: 400px;
    position: relative;
    margin: 50px auto;

    background-color: #fff;
    border: 40px solid #27a4da;
    border-radius: 60px;
    box-shadow:
        0 20px 0 rgba(17, 88, 141, 1),
        0 20px 30px rgba(0, 0, 0, .4);
}

.brackets:before,
.brackets:after {
    content: "";
    display: block;
    height: 240px;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate3d(-50%, -50%, 0);
}

.brackets:before {
    width: 240px;
    border: 40px solid #4a4a4a;
    z-index: 1;
}

.brackets:after {
    width: 40px;
    background-color: #fff;
    z-index: 2;
}