Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating rounded corners for top half of the buttons in CSS

Tags:

css

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

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

But only like to have corners for the top half.

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

like image 282
lakshmen Avatar asked Jul 14 '12 12:07

lakshmen


People also ask

How do I make rounded corners on a button in CSS?

To make the div's borders rounded, you could add the following styling: border-radius: 15px; The above sets a 15 pixel radius on the top-left, top-right, bottom-left and bottom-right corners of the element. The higher the value of the radius, the more rounded the edge becomes.

Which CSS properties can you use to create a rounded corner on just the top-left and top-right corners of an element?

border-radius is the fundamental CSS property to create rounded corners.

What CSS property gives rounded corners?

The border-radius CSS property rounds the corners of an element's outer border edge.

How can you created rounded corners using external CSS?

You can give any element “rounded corners” by applying a border-radius through CSS. You'll only notice if there is a color change involved. For instance, if the element has a background-color or border that is different than the element it's above.


2 Answers

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.

like image 52
starbeamrainbowlabs Avatar answered Sep 22 '22 03:09

starbeamrainbowlabs


When I want to round specific corners I use code below

border-radius: 10px     10px      0           0;             // top-left top-right bottom-right bottom-left.  
like image 41
phoxd Avatar answered Sep 23 '22 03:09

phoxd