CSS Button Borders

Please Share On:

Definition:

You can give a different color button border and also can provide the thickness of your borders.

See an example below of CSS button borders.

Syntax:

.btn1 {border: 1px solid red;}
.btn2 {border: 3px solid green;}
.btn3 {border: 6px solid blue;}
.btn4 {border: 10px solid #ffa500;}
.btn5 {border: 20px solid #00ff00;}

Source Code:

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

		.btn1 {border: 1px solid red;}
 		.btn2 {border: 3px solid green;}
		.btn3 {border: 6px solid blue;}
		.btn4 {border: 10px solid #ffa500;}
		.btn5 {border: 20px solid #00ff00;}
		</style>
	</head>
	
	<body>
	<h2>CSS Button Borders</h2>
      
    <button class="button btn1">1px</button>
    <button class="button btn2">3px</button>
    <button class="button btn3">6px</button>
    <button class="button btn4">10px</button>
    <button class="button btn5">20px</button>

	</body>
</html>

Output:

try it yourself

Donate to support writers.

You may be interested in the following topics:

Post Views: 550

Definition:

Syntax:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.