CODEWITHSUNDEEP
htmlcssborder-box
Kcoitk
Kcoitk

Reputation: 184

add border top right radius only without other sides or background

enter image description here

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

Upvotes: 1

Views: 955

Answers (2)

SNag
SNag

Reputation: 18151

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

Corner triangle with border radius

Upvotes: 1

Ben Rhys-Lewis
Ben Rhys-Lewis

Reputation: 3246

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/

Upvotes: 1

Related Questions