Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make corners rounded only on the top part of the border in css? [closed]

Tags:

html

css

In my site I need to make a div have rounded corners only on the top corners. But I don't know how to do this. Can someone help me?

like image 720
ali Avatar asked Apr 09 '12 13:04

ali


People also ask

How do you set only the top border-radius in CSS?

CSS Syntaxborder-top-left-radius: length|% [length|%]|initial|inherit; Note: If you set two values, the first one is for the top border, and the second one for the left border. If the second value is omitted, it is copied from the first. If either length is zero, the corner is square, not rounded.

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

Definition and Usage The border-top-right-radius property defines the radius of the top-right corner. Tip: This property allow you to add rounded borders to elements!


2 Answers

Brendan's answer is correct, but to get it to render in more browsers, you should use this:

-moz-border-radius: 0px; -webkit-border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;  
like image 73
NotJay Avatar answered Sep 21 '22 04:09

NotJay


border-top-left-radius: 3px; border-top-right-radius: 3px; 
like image 41
Brendan Avatar answered Sep 24 '22 04:09

Brendan