Rounded Tables in Twitter Bootstrap 3

Rounded tables in Twitter Bootstrap 3

If you surround the table with a panel you get your rounded corners.

Like this:

<div class="panel panel-default">
    <table class="table table-bordered">
        ....
    </table>
</div>

How do I apply a border radius to Bootstrap 3's tables?

Try this :-

<table class="table table-curved">
    ....
</table>    

.table-curved {
    border-collapse: separate;
}
.table-curved {
    border: solid #ccc 1px;
    border-radius: 6px;
    border-left:0px;
}
.table-curved td, .table-curved th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.table-curved th {
    border-top: none;
}
.table-curved th:first-child {
    border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
    border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
    border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}

Customizing twitter-bootstrap table. Header floats left

Sadly, border-radius doesn't work on <tr> tags -- only on <th> and <td> tags. But the style you need is very much achievable within those constraints.

CSS

table {
  border-collapse: separate;
  border-spacing: 0 5px;
}

thead th {
  background-color: #006DCC;
  color: white;
}

tbody td {
  background-color: #EEEEEE;
}

tr td:first-child,
tr th:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

jsFiddle

Update: Fixed on Firefox, simplified selectors.

Round bordered table

You can do this by adding border-radius to the css.

table {
   border-radius: 4px;
}

I've wrote a really quick example, so you can see output;

http://jsfiddle.net/oLrp862d/1/

---

Edited to include code here;

table {    background: white;    border: 1px solid #c3c3c3;    border-radius: 5px;    width: 50%;    border-spacing: 0px;    border-collapse: separate;}table th {    font-weight: 600;    font-size: 1.1em;    text-align: center;    background: #c6c6c6;}table td {    background: transparent;}

<table>    <tr>        <th>Name</th>        <th>Amount</th>    </tr>    <tr>        <td>Fake Name</td>        <td>1,337</td>    </tr>    <tr>        <td>Fake Name</td>        <td>1,337</td>    </tr>    <tr>        <td>Fake Name</td>        <td>1,337</td>    </tr></table>

Correct way to create rounded corners in Twitter Bootstrap

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

How to get rounded corners in twitter-bootstrap3's container-fluid

Try this:

Remove the h4 class for joining the container

CSS:

        .top {
            border-top-left-radius:50px;
            border-top-right-radius:50px;
        }
        .bottom {
            border-bottom-left-radius:50px;
            border-bottom-right-radius:50px;
        }

.bg-warning{
    background-color:red;    
}
.bg-info{
    background-color:yellow; 
    }

HTML:

 <div style="height:100px" class="row top bg-warning">

</div>
<div style="height:100px"  class="row bottom bg-info">
    ...
</div>

DEMO

Creating a border with border-radius for Bootstrap 4 tables

You need to change border to border-color and add border-style

#resultsTable {
  border-radius: 25px !important;
  border-width: 5px !important;
  border-style: solid !important;
  border-color: rgba(0, 128, 255, 0.9) !important;
  width: 90%;  /*Tested and working as expected: */
  padding-top: 1%;
  margin: 0px auto;
  float: none;
}

or combine them into one:

border: 5px solid rgba(0, 128, 255, 0.9) !important;

Getting rid of all the rounded corners in Twitter Bootstrap

I set all element's border-radius to "0" like this:

* {
  border-radius: 0 !important;
}

As I'm sure I don't want to overwrite this later I just use !important.

If you are not compiling your less files just do:

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

In bootstrap 3 if you are compiling it you can now set radius in the variables.less file:

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

In bootstrap 4 if you are compiling it you can disable radius alltogether in the _custom.scss file:

$enable-rounded:   false;

Border radius html table

EDIT - Try this: Put overflow:hidden on the .tabled-curved with the border-radius: 25px;. Then just Remove the rest of the border-radius CSS

---

Related Topics