border-radius border 一起使用，圓角出現跟背景顏色一樣的鋸齒

看到下面的圖；

圓角的地方出現了白色的鋸齒；

title

centen

 其中上面的圖的html 和CSS 如下；

<div class="parent">
    <div class="title">title</div>
    <div class="centent">centen</div>
</div>

    .parent{
        border:1px solid coral;
        border-radius: 10px;
        overflow: hidden;
    }
    .title{
        background-color: coral;
        color: #ffffff;
        height: 40px;
        text-align: center;
    }
    .centent{
        background-color: #ffffff;
    }

解決方法：

1.給parentElement 一個顏色跟子元素一樣的顏色；

<div class="parent bg">
    <div class="title">title</div>
    <div class="centent">centen</div>
</div>

    .bg{
        background-color: coral;
    }

title

centen

2.parent 不要border;而是讓centent 添加border 同樣得到相同的效果；