矩形框，在一个按钮内的文本周围带有圆角

Question

I would like to get the box around Sign Up smaller, ideally, halfway between the text and current state.

. I am using bootstrap-3. I tried making the btn smaller (btn-sm), it seamed like that is the problem. But that doesn't do anything. Here is what I have:

 .btn { font-family: "Lucida Sans Unicode"; font-size: 18px; } #signup { border-color: #fff; } /*------------------------------------------------- Navigation bar -------------------------------------------------*/ .navbar-toggle { float: left; } .navbar { margin-bottom: 0px; font-family: "Lucida Sans Unicode"; font-size: 18px; } 

 <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">MyWebsite</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav pull-right" > <li><a href="#">Log in</a></li> <!-- I'm trying to get the text in the button below within a rectangle box --> <li><a href="#" class="btn btn-inverse" id="signup">Sign up</a></li> </ul> </div> </div> </nav> 

CSS:

Answer 1

There is padding/margin between the button and the text, you need to look up at CSS file. There is two CSS files for bootstrap.

Find btn-sm in both CSS files. It will be inside one of them. However I see that you also have btn btn-inverse for button class. Do look at them.

If you want the corners of button to be more cursive, find the border-radius property.