EN
CSS - rounded buttons
0
points
In this article, we would like to show you how to create rounded buttons using CSS.
Quick solution:
button {
border-radius: 10px; /* example value - 10px */
}
Circle button:
button {
border-radius: 50%; /* circle only if button height=width, otherwise ellipse */
}
Practical example with border-radius property
In this section, we add the border-radius property to round the corners of the button elements.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
button {
padding: 10px;
margin: 3px;
}
.button1 {
border: 3px solid #b30000;
border-radius: 5px;
}
.button2 {
border: 5px dashed #adadad;
border-radius: 11%;
}
.button3 {
border: 6px dotted #15668e;
border-radius: 5px;
}
</style>
</head>
<body>
<button class="button1">Button1</button>
<button class="button2">Button2</button>
<button class="button3">Button3</button>
</body>
</html>
Round button
In this example, we create a round button using border-radius property set to 50%.
Note:
Remember to make a square button first (
height=width), otherwise you will get an ellipse.
Practical example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.circle {
/* make square first */
height: 75px;
width: 75px;
/* round the corners */
border-radius: 50%;
}
.ellipse {
/* height != width */
height: 50px;
width: 75px;
/* round the corners */
border-radius: 50%;
}
</style>
</head>
<body>
<button class="circle">Circle</button>
<button class="ellipse">Ellipse</button>
</body>
</html>