CSS - buttons with custom borders
In this article, we would like to show you how to create a button with a custom border using CSS.
There are three main properties that you can use to style the button element border:
border-color,border-style,border-width,
The three properties mentioned above can be used in just one property - border, with the following syntax:
xxxxxxxxxxborder: size style color;Additionally, you can use the border-radius property to round button element corners or create a round button.
In this example, we create three buttons with different borders using border property only.
xxxxxxxxxx<html><head> <style> button { padding: 10px; margin: 3px; } .button1 { border: 3px solid #b30000; } .button2 { border: 5px dashed #adadad; } .button3 { border: 6px dotted #15668e; } </style></head><body> <button class="button1">Button1</button> <button class="button2">Button2</button> <button class="button3">Button3</button></body></html>In this section, we add the border-radius property to round the corners of the button elements.
xxxxxxxxxx<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>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:
xxxxxxxxxx<html><head> <style> button { /* make square first */ height: 75px; width: 75px; /* round the corners */ border-radius: 50%; } </style></head><body> <button>Click me.</button></body></html>