add border top right radius only without other sides or background

Question

I am trying to achieve the top right triangle as in the picture shows but when I apply border radius why does it apply borders to all side as I specified only one side radius. Although I applied border-top-right-radius: 5px; instead of border-radius: 0px 5px 0px 0px; I get the same result. Any Help?

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;
}

What picture? Are you supposed to be linking to an image showing what you want? — Ben Rhys-Lewis, Feb 05 '16 at 16:10

SNag · Accepted Answer · 2016-02-05T16:36:04.370

For a rounded top-right border, do:

-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;

Generator: http://border-radius.com/

To get a top-right triangle, do:

width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #009999 transparent transparent;

Generator: http://triangle.designyourcode.io/

To get both the top-right corner triangle and top-right rounded border radius, use a container to the corner with border-radius and overflow:hidden.

.container {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
  border: 1px solid gray;
}

.corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 0;
  border-color: transparent #009999 transparent transparent;
}

.content {
  font-family: "Verdana";
  font-size: 12pt;
  text-align: center;
  height: 100px;
  line-height: 100px;
}

<div class="container">
  <div class="corner"></div>
  <div class="content">
    Rainmarker
  </div>
</div>

OUTPUT

You missed my question......Although I applied border-top-right-radius: 5px; instead of border-radius: 0px 5px 0px 0px; but the same result. — Kcoitk, Feb 05 '16 at 16:12
@Kcoitk: I don't see `border-top-right-radius` in your question. — SNag, Feb 05 '16 at 16:15

score 1 · Answer 2 · answered Feb 05 '16 at 16:12

1

Heres a pen showing what you want: http://codepen.io/anon/pen/VeEKLP

You needed :

border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #007bff transparent transparent;

Heres a good resource for making css triangles: http://apps.eky.hk/css-triangle-generator/

answered Feb 05 '16 at 16:12

Ben Rhys-Lewis

3,118
8
34
45

sir, I need 5px radius support at top right of the triangle. In the codepen I don't see the top right radius, only triangle – Kcoitk Feb 05 '16 at 16:19
Well add it then: top:5px; right:5px; as you are positioning absolutely. – Ben Rhys-Lewis Feb 05 '16 at 16:20
http://codepen.io/anon/pen/OMBRXv it applies but give it a round box instead of a triangle – Kcoitk Feb 05 '16 at 16:23
but it's not making top right radius...... it is shifting 5px inside from top right. that's not I am looking, I just need the top right portion radius keeping the triangle – Kcoitk Feb 05 '16 at 16:29
Ah ok i think i see what you mean. Maybe look at this previous question. Its pretty complicated but should solve it for you: http://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css – Ben Rhys-Lewis Feb 05 '16 at 16:34
@Kcoitk: See my answer for doing this. – SNag Feb 05 '16 at 16:37
Yeah, I think it's too complicated to use it at this time, But able to made a solution http://codepen.io/anon/pen/KVGgXL – Kcoitk Feb 05 '16 at 16:40

add border top right radius only without other sides or background

2 Answers2