CODEWITHSUNDEEP
css
user2277916
user2277916

Reputation: 103

border-radius - not smooth... why?

I'm trying to create a rounded corner button using border radius but currently, the corners are not looking as they are supposed to.

Is there something wrong w this line of code? 

<li style="padding-left:20px; padding-top:8px">
      <!-- Login modal -->
    <button class="btn-xs btn btn-navbar" data-toggle="modal" data-target="#myModal" style = "margin-top: 10px; border-radius: 30%; background-color: white;">
      Log in
    </button>
</li>

Upvotes: 0

Views: 6090

Answers (2)

Cyclotron3x3
Cyclotron3x3

Reputation: 2229

To get the rounded look, simply increase the pixel size on the border radius.

Create a custom class name it as round. We will use this class to modify the buttons provided by Bootstrap by default.

< button type="button" class="btn btn-primary btn-lg round"> Log In < /button>

Add CSS modification to the custom class

.round {
  border-radius: 24px;
}

Demo

Upvotes: 0

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

You gave the border radius in (%), give the border Radius in pixel. It will work as you want.

<li style="padding-left:20px; padding-top:8px">
<!-- Login modal -->
  <button class="btn-xs btn btn-navbar" data-toggle="modal" data-target="#myModal" style = "margin-top: 10px; border-radius: 30px; background-color: white;">
    Log in
  </button>
</li>

Upvotes: 2

Related Questions