CSS Rounded Corners

Rounded table corners CSS only

Seems to work fine in FF and Chrome (haven't tested any others) with separate borders: http://jsfiddle.net/7veZQ/3/

Edit: Here's a relatively clean implementation of your sketch:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

CSS Rounded corners

Try:

selector {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

This will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. It may be easier to make a separate class for this - there are 3 statements which are needed for full compatibility.

Also, try here (cssjuice.com) for some more techniques using images.

I'm not completely sure whether this will work with a table, but if you're in complete control - don't use a <table> for layout. Please.

(Note - I think its fine to use the table tag for tabular data, just not where DIVs should be used.)

Update: to apply to one corner only:

-moz-border-radius-topleft: 3px;
/* ... */
-webkit-border-top-left-radius: 3px;

Continue for topright or top-right.

HTML table rounded corner

You can make the rounded table using the border-radius CSS attribute based on border-collapse: separate as follows.

table {
  border: 1px solid #CCC;
  font-size: 13px;
  color: white;
  
  background: red;
  
  border-collapse: separate;
  border-radius: 10px;
  -moz-border-radius: 10px;
}

td {
  border: none;
}

<table border="1">
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  <tr>
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  <tr>
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  <tr>
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  <tr>
</table>

Rounded corners for each row of an HTML table using only CSS?

Change your css to:

body {
    background-color: #FFCBAA;
    font-family: "Helvetica Neue";
}

h1 {
    font-size: 2em;

}

table {
    border-collapse: separate;
    border-spacing: 0 0.5em;

}

tr {
    font-size: 1.2em;
}

tr td {
  padding: 15px 20px;
  background-color: rgba(255, 238, 227, .93);
}

tr td:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

tr td:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Creating rounded corners using CSS

Since CSS3 was introduced, the best way to add rounded corners using CSS is by using the border-radius property. You can read the spec on the property, or get some useful implementation information on MDN:

If you are using a browser that doesn't implement border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), then the links below detail a whole bunch of different approaches. Find one that suits your site and coding style, and go with it.

1. CSS Design: Creating Custom Corners
   & Borders
2. CSS Rounded Corners 'Roundup'
3. 25 Rounded Corners Techniques with CSS

Using CSS border-radius (rounded corners), how can we prevent the rounded corners from disappearing if the image is scaled down (max width/height)?

just add border radius in anchor tag too

<a style="border-radius:20%" > img </a>

How to add rounded corners to a single side in HTML-CSS

Try like following snippet, for more info take a look here:

.button {
  border: 1px solid #00bfff;
  border-bottom-right-radius: 30%;
  border-top-right-radius: 30%;
  padding: 20px;
  background: #00bfff;
}

<button type="button" class="button">Button</button>

Rounded corners on rectangular image using CSS only

You do that by adding a parent div to your img and the code flows as follows

figure{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
}

Updated Demo

rounded corner for bottom border using css

Here you go. You need to add a div and give it a border-bottom. I have changed the HTML and CSS below. You can increase the div's height and width as you like

.footer_line {
  white-space: nowrap;
  margin-top: 12px;
  font-weight: bold;
  padding-bottom: 1px;
  font-size: 36px;
  width: 150px;
  border-radius: 4px !important;
}

.news_let {
  margin-left: 0px !important;
  font-weight: bold !important;
  letter-spacing: 1px !important;
  color: white !important;
  font-size: 21px !important;
  border-bottom: 4px solid #2782dd !important;
  border-radius:4px;
}

<div class="col-md-6">
  <h3 class="footer_line">News Letter
    <div class="news_let"></div>
  </h3><br/>
</div>

---

Related Topics