CSS Button Shape

Please Share On:

Definition:

You can shape your button by using border-radius property and can make eclipse, rounded-corner button, or circular button.

Syntax:

.btn1 {border-radius: 10px;}
.btn2 {border-radius: 1em;}
.btn3 {border-radius: 3in;}
.btn4 {border-radius: 30%;}
.btn5 {border-radius: 50%;}

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
               
		.button {
		  background-color: darkred;
		  border: none;
		  color: white;
		  padding: 20px 20px;
		  text-align: center;
		  text-decoration: none;
          margin-bottom:2px;
		}

		.btn1 {border-radius: 10px;}
 		.btn2 {border-radius: 1em;}
		.btn3 {border-radius: 3in;}
		.btn4 {border-radius: 30%;}
		.btn5 {border-radius: 50%;}
		</style>
	</head>
	
	<body>
	<h2>CSS Button Shape</h2>
      
    <button class="button btn1">10px</button>
    <button class="button btn2">1em</button>
    <button class="button btn3">3in</button>
    <button class="button btn4">30%</button>
    <button class="button btn5">50%</button>

	</body>
</html>

Output:

try it yourself

Donate to support writers.

You may be interested in the following topics:

Post Views: 459

Definition:

Syntax:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.