Correct way to create rounded corners in Twitter Bootstrap

css, less, twitter-bootstrap

Solution

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);
}

Problem

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?

Original source

Related problems