How to make round corner button in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this article, we will use some bootstrap classes to design round corner button.

To make round corner button, put .btn class to create round corner button in bootstrap.

Bootstrap has it’s own classes for borders including .btn to get rid of rounded corners on any element including buttons.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Define its class name

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

  <meta name="viewport" content="width=device-width, initial-scale=1">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

Step 3: Define its class name

After that, create round corner with a class name .btn.

  <div class="text-center">
    <h3>Rounded corners button</h3>
    <a class="btn btn-primary">Regular Rounded Corners</a>
  </div>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="text-center">
    <h3>Rounded corners button</h3>
    <a class="btn btn-primary">Regular Rounded Corners</a>
  </div>
</body>
</html>

Check the output of the above code example.

Bootstrap, Font, Responsive

All the best 👍