Correct way to create rounded corners in Twitter B

Question

I've just started with Twitter Bootstrap and here is one question.

I am creating custom <header> block, and I want it's bottom corners to be rounded.

Is there any "correct" way to do this by using predefined classes, or I have to specify it manually like:

border-radius: 10px;               // and all that cross-browser trumpery

For now, I'm using css styles. Maybe it will be better to use less for that issue?

Answer 1

I guess it is what you are looking for: http://blogsh.de/tag/bootstrap-less/

@import 'bootstrap.less';
div.my-class {
    .border-radius( 5px );
}

You can use it because there is a mixin:

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

For Bootstrap 3, there are 4 mixins you can use...

.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);

or you can make your own mixin using the top 4 to do it in one shot.

.border-radius(@radius){
    .border-top-radius(@radius);
    .border-right-radius(@radius);
    .border-bottom-radius(@radius);
    .border-left-radius(@radius);
}

Answer 2

<div class="img-rounded"> will give you rounded corners.

Answer 3

With bootstrap4 you can easily do it like this :-

class="rounded" 

or

class="rounded-circle"