Correct way to create rounded corners in Twitter Bootstrap
<div class="img-rounded">
will give you rounded corners.
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);
}
Bootstrap is just a big, useful, yet simple CSS file - not a framework or anything you can't override. I say this because I've noticed many developers got stick with BS classes and became lazy "I-can't-write-CSS-code-anymore" coders [this not being your case of course!].
If it features something you need, go with Bootstrap classes - if not, go write your additional code in good ol' style.css
.
To have best of both worlds, you may write your own declarations in LESS and recompile the whole thing upon your needs, minimizing server request as a bonus.
As per bootstrap 3.0 documentation. there is no rounded corners class or id for div tag.
you can use circle behavior for image by using
<img class="img-circle">
or just use custom border-radius
css3 property in css
for only bottom rounded coner use following
border-bottom-left-radius:25%; // i use percentage u can use pix.
border-bottom-right-radius:25%;// i use percentage u can use pix.
if you want responsive circular div then try this
referred from Responsive CSS Circles