border-radius + background-color == 잘린 테두리

border-radius + background-color == 잘린 테두리

---

을 고려 div으로 border-radius, border및 background-colorCSS 속성이 적용 :

<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;">
  Blah
</div>

이제 유사한 레이아웃을 고려하지만 background-color내부 div에 지정됩니다.

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

나는이 사실에 의해 낙담하고있어 background-color의 내부는 <div> 의 경계를 모호하게되어 외부를 <div> .

이것은 문제의 단순화 된 샘플입니다. 실제로는 <table>행 색상이 번갈아 가며 내부 요소로 사용하고 있습니다. 그리고 <div>요소 border-radius에서 작동하지 않는 것 같기 때문에 외부 요소로 사용하고 <table>있습니다. 다음 은이 문제의 샘플 jsfiddle 입니다.

누구든지 해결책에 대한 제안이 있습니까?

---

overflow:hidden외부 시도 div:

<div style="border-radius:10px; border: 1px black solid; overflow: hidden">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

---

다음 CSS 규칙을 추가합니다.

tr:first-of-type td:first-child {
    border-top-left-radius: 5px;    
}

tr:first-of-type td:last-child {
    border-top-right-radius: 5px;    
}

tr:last-of-type td:first-child {
    border-bottom-left-radius: 5px;    
}

tr:last-of-type td:last-child {
    border-bottom-right-radius: 5px;    
}

업데이트 된 바이올린을 참조하십시오 .

---

overflow: hidden;테두리가있는 요소 에 적용하여이 문제를 해결할 수 있습니다 . 내가 생각하는 훨씬 더 깨끗한 방법.

---

테이블을 사용해야합니까? 다음은 DIV를 사용하는 예입니다. http://jsfiddle.net/6KwGy/1/

HTML :

<div id="container">
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
    <div class="row">
        <div class="leftHalf">
            <p>data 1</p>
        </div>
        <div class="rightHalf">
            <p>data 2</p>
        </div>
    </div>
</div>

CSS :

.container {
    width: 100%;
}

.leftHalf {
    float:left;
    width:50%;
}

.rightHalf {
    float:left;
    width:50%;
}
.row {
    float: left;
    width: 100%;
}

#container .row:nth-child(odd) {
    background-color: #EEEEEE;
}
#container .row:first-child {
    border-top: 1px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-radius-topleft: 5px;
    -webkit-border-radius-topright: 5px;
}
#container .row:last-child {
    border-bottom: 1px solid black;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-radius-bottomleft: 5px;
    -webkit-border-radius-bottomright: 5px;
}
#container .row {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

---

패딩을 추가하거나 외부 요소에 배경색을 추가하십시오.

---

div에 약간의 패딩을주는 것이 허용됩니까? 이렇게하면 배경색이 충돌하지 않습니다.

---

자식 요소에도 border-radius를 추가 할 수 있습니다.

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE; border-radius:10px;">
    Blah
  </div>
</div>

참조 URL : https://stackoverflow.com/questions/6312067/border-radius-background-color-cropped-border