Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make a button's corner only rounded on the top?

I'm trying to make a button which has rounded corners on the top and a normal corner on the bottom. How can I make it like this?

like image 857
Young Avatar asked Nov 04 '18 08:11

Young


People also ask

How do you put border radius only on top?

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.


1 Answers

An General Example :

RaisedButton(
              onPressed: () {},
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15.0),
                      topRight: Radius.circular(15.0))),
              child: Text('Click Me!'),
              color: Colors.blueAccent,
              textColor: Colors.white,
            ),

As Per pskink Comment :

RaisedButton(
              onPressed: () {},
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(
                top: Radius.circular(15.0),
              )),
              child: Text('Click Me!'),
              color: Colors.blueAccent,
              textColor: Colors.white,
            ),
like image 93
anmol.majhail Avatar answered Oct 13 '22 01:10

anmol.majhail