Creating rounded corners with CSS

Few tips and tricks about CSS this time. On this occasion we will discuss the make rounded corner by using CSS.

Obviously this is helpful for programmers who like to make a design problem with the image processing software like Photoshop or Gimp when trouble creating rounded corners. And with css only we could make a rounded corner. The trick was fairly easy and efficient course.

For comparison with the not using CSS, for example in making the table:

<table width=”100%” border=”1″>

<tr>

<td> test </ td>

</ tr>

</ table>

Weather is a bit stiff, is not it? Well, what if we give a little spice css:)

<html>

<head>

<style type=”text/css”>

table {

border: 1px solid # 000000;

width: 100%;

border-radius: 15px;

text-align: center;

}

</ style>

</ head>

<body>

<table>

<tr>

<td> test </ td>

</ tr>

</ table>

</ body>

</ html>

Let’s see the difference? Look neater is not it?

For the border radius can be adjusted to your taste. This script has been tested in opera and Firefox. But it can also border-radius should be like this:

border-radius: 15px 15px 10px 10px;

Actually there’s more we can do with a rounded corner CSS in changing this. But I think this is enough to be studied.

Hopefully, this tutorial is useful for those of you who are just learning CSS.