Create rounded corners for the top half of buttons in CSS

Question

I would like to make rounded corners only for the upper half of the buttons.

I know how to make rounded corners for all sides using border-radius and -webkit-border-radius .

But only how to have angles for the upper half.

I need some guidance on how to do this in CSS.

Answer 1

You can use the following styling rules:

 border-top-left-radius border-top-right-radius 

Note. The border-radius rule works without the -webkit- bit.

Answer 2

When I want to round certain angles, I use the code below

 border-radius: 10px 10px 0 0; // top-left top-right bottom-right bottom-left. 

Answer 3

Here is the pattern I like to use:

CSS

 .round-corners-5px{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .round-corners-10px{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .unround-top-corners{ -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; } .unround-bottom-corners{ -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } 

HTML

 <button class="round-corners-5px unround-bottom-corners" style="background-color: white;"></button> 

Answer 4

There are special options for the css border-radius tag for this:

 border-top-left-radius:2em; border-top-right-radius:2em; 

Answer 5

If you want to round only certain angles, this is the code for it:

 border-radius:5px 5px 5px 5px; 

The first value is for the upper left corner, the second for the upper right corner, the third for the lower left corner and the fourth for the lower right corner.

Answer 6

If you use sass scss, you can write it once and reuse it as a simple line of code, for example:

In your sass or scss file, define mixin as follows:

 @mixin rounded($amount: "10px",$position: null) { @if $position != null { @if $position == "top" or $position == "bottom" { //top or bottom -webkit-border-#{$position}-left-radius: $amount; -moz-border-#{$position}-left-radius: $amount; border-#{$position}-left-radius: $amount; -webkit-border-#{$position}-right-radius: $amount; -moz-border-#{$position}-right-radius: $amount; border-#{$position}-right-radius: $amount; } @else { // top-left or top-right or bottom-left or bottom-right -webkit-border-#{$position}-radius: $amount; -moz-border-#{$position}-radius: $amount; border-#{$position}-radius: $amount; } } @else { // ALL IF EMPTY -webkit-border-radius: $amount; -moz-border-radius: $amount; border-radius: $amount; } } 

Then in the scss file you can use this mixin like this:

  @include rounded(); /*as default 10px on all corners*/ @include rounded(15px); /*all corners*/ @include rounded(15px, top); /*all top corners*/ @include rounded(15px, bottom); /* all bottom corners*/ @include rounded(15px, top-right); /*this corner only*/ @include rounded(15px, top-left); /*this corner only*/ @include rounded(15px, bottom-right); /*this corner only*/ @include rounded(15px, bottom-left); /*this corner only*/ 

This .scss code will generate this .css code:

  /* as default 10px on all corners */ -webkit-border-radius: "10px"; -moz-border-radius: "10px"; border-radius: "10px"; /* all corners */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* all top corners */ -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px; border-top-right-radius: 15px; /* all bottom corners */ -webkit-border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; border-bottom-left-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px; /* top-right corner only */ -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px; border-top-right-radius: 15px; /* top-left corner only */ -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; border-top-left-radius: 15px; /* bottom-right corner only */ -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px; /* bottom-left corner only */ -webkit-border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; border-bottom-left-radius: 15px; } 

Answer 7

this helps to understand how this works, I did this to the left square and rounded corners:

 .btn-circle.btn-lg { width: 170px; height: 47px; padding: 10px 16px; font-size: 17px; line-height: 1.33; /*border-radius: 25px;*/ //use this for both side rounded corner side border-radius: 0px 50px 50px 0px / 50px 50px 50px 50px; } 

this guide helped me make rounded buttons on twitter bootstrap