Correct way to create rounded corners in Twitter Bootstrap

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?

check [this](http://stackoverflow.com/questions/11483708/creating-rounded-corners-for-top-half-of-the-buttons-in-css/28781315#28781315) recently i tried left squared right rounded , hope helps someone — Shaiju T, Feb 28 '15 at 11:48
I'm assuming that by 'predefined classes', you just want to add a class to your `
` and give it rounded corners, and generally make it look bootstrappy. Here's how: http://stackoverflow.com/a/29383075/1450294 — Michael Scheper, Apr 01 '15 at 04:53

score 94 · Answer 1 · answered Jan 11 '14 at 00:00

94

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

answered Jan 11 '14 at 00:00

Swade

949
6
2

15

@EdwardRuchevits No. It works just fine on divs too. I don't like using it because it's a bit confusing, but it does work. – Brandon Osborne Mar 12 '14 at 11:24
If it's not an image, it's likely a panel, and there's a syntactically correct class for that, too: http://stackoverflow.com/a/29383075/1450294 – Michael Scheper Sep 08 '16 at 17:23

score 68 · Accepted Answer · edited May 23 '14 at 21:22

68

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

edited May 23 '14 at 21:22

Drmjo

584
1
5
21

answered Aug 23 '12 at 03:00

Danil Speransky

29,891
5
68
79

6

So, I have to use `less` for that and it's impossible with `bootstrap.css`? – Edward Ruchevits Aug 23 '12 at 03:06
Bootstrap3 does not have such a mixin. – Kolyunya May 23 '14 at 19:57
1

The question asked for 'predefined classes'—you're creating classes here. See this answer for the predefined classes: http://stackoverflow.com/a/29383075/1450294 – Michael Scheper Apr 01 '15 at 04:52
Each of the Bootstrap 3 shortcut mixins (.border-top-radius, .border-right-radius, etc.) round 2 corners, so you can round all 4 via a .border-radius mixin using only left and right, or top and bottom. You can also round 3 corners via the appropriate combination, e.g. top and left will round bottom-left, top-left, and top-right. – Kevin Jhangiani Jun 04 '15 at 07:56
Chrome gives a malware warning for that blogsh.de site – stef Aug 24 '17 at 19:35

score 17 · Answer 3 · answered Aug 23 '12 at 03:18

17

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.

answered Aug 23 '12 at 03:18

moonwave99

21,957
3
43
64

8

Yes, sure. :) Just don't want to invent bicycle. – Edward Ruchevits Aug 23 '12 at 04:13
8

you mean re-invent the wheel :) – Shervin Asgari Feb 12 '13 at 13:55
53

Inventing the bicycle would be awesome. – OpenCoderX May 08 '13 at 00:31
3

Is this bike-shedding about bike wheel analogies? #humour – fcar Sep 18 '14 at 08:25
I think the concern is what happens when the bicycle gets pimped up—he wants his widget to still fit. (I mean this in all seriousness, even though it may sound a bit sus. ) The problem with directly manipulating CSS is that it might not suit the overall theme, especially if the theme changes, e.g. with a plug-in or Bootstrap update. I would argue that using an appropriate CSS class is no more 'lazy' than using an appropriate constant in code, instead of typing a magic number. – Michael Scheper Sep 08 '16 at 17:22
Don't reinvent the wheel, but you never know when you will need to add or change a little bit of something to that wheel, so knowledge of the wheel components and how they work are always useful. – wendy May 18 '17 at 02:47

score 10 · Answer 4 · edited May 23 '17 at 12:26

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

score 10 · Answer 5 · answered Apr 01 '15 at 04:50

What you want is a Bootstrap panel. Just add the panel class, and your header will look uniform. You can also add classes panel panel-info, panel panel-success, etc. It works for pretty much any block element, and should work with <header>, but I expect it would be used mostly with <div>s.

score 8 · Answer 6 · answered Apr 18 '14 at 15:42

8

Without less, ans simply for a given div :

In a css :

.footer {
background-color: #ab0000;
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}

In html :

 <div class="footer">
        <p>blablabla</p>
      </div>

answered Apr 18 '14 at 15:42

mcbjam

7,344
10
32
40

score 6 · Answer 7 · edited Jun 20 '20 at 09:12

6

With bootstrap4 you can easily do it like this :-

class="rounded"

or

class="rounded-circle"

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 03 '17 at 18:35

Natesh bhat

12,274
10
84
125

score 0 · Answer 8 · answered Feb 14 '17 at 22:32

If you're using Bootstrap Sass, here's another way that avoids having to add extra classes to your element markup:

@import "bootstrap/mixins/_border-radius";
@import "bootstrap/_variables";

.your-class {
  $r: $border-radius-base; // or $border-radius-large, $border-radius-small, ...
  @include border-top-radius($r);
  @include border-bottom-radius($r);
}

score 0 · Answer 9 · answered Sep 21 '18 at 15:14

In Bootstrap 4, the correct way to border your elements is to name them as follows in the class list of your elements:

For a slight rounding effect on all corners; class="rounded"
For a slight rounding on the left; class="rounded-left"
For a slight rounding on the top; class="rounded-top"
For a slight rounding on the right; class="rounded-right"
For a slight rounding on the bottom; class="rounded-bottom" 
For a circle rounding, i.e. your element is made circular; class="rounded-circle"
And to remove rounding effects; class="rounded-0"

To use Bootstrap 4 css files, you can simply use the CDN, and use the following link in the of your HTML file:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

This will provided you with the basics of Bootstrap 4. However if you would like to use the majority of Bootstrap 4 components, including tooltips, popovers, and dropdowns, then you are best to use the following code instead:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Alternatively, you can install Bootstrap using NPM, or Bower, and link to the files there.

*Note that the bottom tag of the three is the same as the first tag in the first link path.

A full working example, could be :

<img src="path/to/my/image/image.jpg" width="150" height="150" class="rounded-circle mx-auto">

In the above example, the image is centered by using the Bootstrap auto margin on left and right.

Correct way to create rounded corners in Twitter Bootstrap

9 Answers9

With bootstrap4 you can easily do it like this :-

Linked