如何实现这种border的效果？

Question

这个是我想要实现的效果

这个是我的代码

---

.main .middle .m-middle .common{
  float: left;
  padding: 10px;
  text-align: center;
  position: relative;
  margin: 0 auto 30px;
  z-index: 1;
  border: 1px solid #e4ecf3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

---

这个是做出来的效果

请问我该拿这个border怎么办T_T

Answer 1

里边再套一层

<style>
   .border{
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        border: 1px solid  #eee;
        border-top:none;
    }
</style>
<div>
    <img src="" alt="">
    <div class="border"><!--给这个DIV加border不就行了吗-->
        <p>幼儿班</p>
        <span>共3课</span>
    </div>
</div>