Languages
[Edit]
EN

CSS - buttons with custom borders

0 points
Created by:
Zayyan-Todd
560

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:

border: size style color;

Additionally, you can use the border-radius property to round button element corners or create a round button.

Practical example using border property

In this example, we create three buttons with different borders using border property only.

// ONLINE-RUNNER:browser;

<!doctype html>
<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>

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>
    
    button {
      /* make square first */
      height: 75px;
      width: 75px;
      
      /* round the corners */
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <button>Click me.</button>
</body>
</html>

References

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join