css给div四个边角添加样式

<div class="main">

<div class="left-top" 
                        style="position: absolute; border-left: solid red;border-top:solid red;width: 30px;height: 30px; left: -3px;top: -3px;"></div>
                    <div class="left-bottom" 
                        style="position: absolute; border-left: solid red;border-bottom: red solid; width: 30px;height: 30px;left: -3px;bottom: -3px;"></div>
                    <div class="right-1"
                        style="position: absolute;border-right: solid red;border-top: solid red;width: 30px;height: 30px;right: -3px;top: -3px;"></div>
                    <div class="right-bottom"
                        style="position: absolute;border-right: solid red;border-bottom: solid red;width: 30px;height: 30px;right: -3px;bottom: -3px;"></div>

</div>