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.
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.
border-radius is the fundamental CSS property to create rounded corners.
The border-radius CSS property rounds the corners of an element's outer border edge.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With