html - 境界線の右上の半径のみを追加し、他の側面や背景は追加しません

Question

写真のように右上の三角形を実現しようとしていますが、境界線の半径を適用すると、片側の半径のみを指定したため、境界線がすべての側面に適用されるのはなぜですか。border-top-right-radius: 5px;代わりに申請しましたborder-radius: 0px 5px 0px 0px;が、同じ結果が得られました。ヘルプはありますか？

HTML:

<div class="pricing-head">
  <h3>Rainmarker</h3>
  <span>For up to 10 users</span>
  <div class="ribon"></div>
</div>

CSS:

.pricing-head {
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
}
.pricing-head .ribon {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 75px;
}
.pricing-head .ribon:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    border-bottom: 70px solid transparent;
    border-left: 70px solid transparent;
    border-right: 70px solid #ffad6a;
    border-radius: 0 5px 0 0;
}