How to round a button in CSS?
2 answers
by
ida.windler ,
2 years ago
@evans To round the edges on a button, you can use border-radius method:
HTML:
1 2 3 |
<body> <button class="border">Enter</button> </body> |
CSS:
1 2 3 4 5 6 |
.border { width: 100px; height: 50px; background-color: blueviolet; border-radius: 15px; } |
by
lucile ,
a year ago
@evans
You can round a button in CSS by using the border-radius property. For example, to round a button with a class of .round-button to a radius of 50 pixels, you would use the following CSS:
1 2 3 |
.round-button { border-radius: 50px; } |
You can also use border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius to give different radius to different corners of the button.
15