CSS Curly brace.

by Ryan Neufeld

HTML

<h1>Left brace</h1>
<div id=default>
<span class="left-brace-tl"></span>
<span class="left-brace-tr"></span><br />
<span class="left-brace-bl"></span>
<span class="left-brace-br"></span>
</div>

<div id=one>
<span class="left-brace-tl"></span>
<span class="left-brace-tr"></span><br />
<span class="left-brace-bl"></span>
<span class="left-brace-br"></span>
</div>


<div id=two>
<span class="left-brace-tl"></span>
<span class="left-brace-tr"></span><br />
<span class="left-brace-bl"></span>
<span class="left-brace-br"></span>
</div>


<h1>Right brace</h1>
<div id=default-right>
<span class="right-brace-tl"></span>
<span class="right-brace-tr"></span><br />
<span class="right-brace-bl"></span>
<span class="right-brace-br"></span>
</div>

<div id=three>
<span class="right-brace-tl"></span>
<span class="right-brace-tr"></span><br />
<span class="right-brace-bl"></span>
<span class="right-brace-br"></span>
</div>


<div id=four>
<span class="right-brace-tl"></span>
<span class="right-brace-tr"></span><br />
<span class="right-brace-bl"></span>
<span class="right-brace-br"></span>
</div>

CSS

div {
    padding: 10px;
}

#one span, #three span {
    height: 40px;
    width: 10px;
}

#two span,#four span {
    height: 20px;
}

span {
    width: 30px;
    height: 30px;
    display: inline-block;
}

.left-brace-tl {
    border-right: 2px solid grey;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    margin-right:-6px;
    margin-top: 10px;
}
.left-brace-tr {
    margin-bottom: 10px;
    border-left: 2px solid grey;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
}
.left-brace-bl {
    margin-top: -4px;
    border-right: 2px solid grey;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    margin-right:-6px;
}

.left-brace-br {
    margin-bottom: -8px;
    border-left: 2px solid grey;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
}


.right-brace-bl {
    border-right: 2px solid grey;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    margin-right:-6px;
    margin-top: 13px;
}
.right-brace-br {
    margin-bottom: 10px;
    border-left: 2px solid grey;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
}
.right-brace-tl {
    margin-top: -4px;
    border-right: 2px solid grey;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    margin-right:-6px;
}

.right-brace-tr {
    margin-bottom: -8px;
    border-left: 2px solid grey;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
}