内凹圆角``````内凹圆角<html> <head> <meta charset="utf-8"/> <title>内

<html>
<head>
<meta charset="utf-8"/>
<title>内凹圆角</title>
<style type="text/css">
    .cro {
        width: 100px;
        height: 100px;
        border: 1px solid #58C4E6;
        position: relative;
    }
 
    .cro_left_top, .cro_right_top, .cro_left_bottom, .cro_right_bottom {
        position: absolute;
        width: 20px;
        height: 20px;
        border: 1px solid #fff;
        z-index: 1;
        background: #fff;
    }
 
    .cro_left_top {
        top: -1px;
        left: -1px;
        border-radius: 0 0 20px 0;
        border-bottom: 1px solid #58C4E6;
        border-right: 1px solid #58C4E6;
    }
 
    .cro_right_top {
        top: -1px;
        right: -1px;
        border-radius: 0 0 0 20px;
        border-bottom: 1px solid #58C4E6;
        border-left: 1px solid #58C4E6;
    }
 
    .cro_left_bottom {
        left: -1px;
        bottom: -1px;
        border-radius: 0 20px 0 0;
        border-top: 1px solid #58C4E6;
        border-right: 1px solid #58C4E6;
    }
 
    .cro_right_bottom {
        right: -1px;
        bottom: -1px;
        border-radius: 20px 0 0 0;
        border-top: 1px solid #58C4E6;
        border-left: 1px solid #58C4E6;
    }
</style>
</head>
<body>
<div class="cro">
    <div class="cro_left_top"></div>
    <div class="cro_right_top"></div>
    <div class="cro_left_bottom"></div>
    <div class="cro_right_bottom"></div>
</div>
</body>
</html>