Killer way to create to rounded corners CSS without Images

4 min read
0
0
34

Nutshell Tutorial to make rounded corners CSS without images for you website very easy. Now making rounded corners css is very simple with this tutorial.

In internet we can see rounded corner images in some websites. Not only rounded corners image you can see rounded corner tables and DIV tags also. It will look nice and also very attractive. In this post am sharing how to make rounded corners CSS without image.

To create this rounded corner there is no need of multiple line of code or designing in Photoshop. You can make it as very simple as below. To make rounded corner you have to use the simple border-radius: property in the div tag or table or img.

Example border-radius: 14px;

By using border-radius CSS property you can make all corner as rounded. Now you may have question if I want to make one corner as radius how to do that without images? Here is your answer.

This sample property makes only top right corner as radius.

border-radius: 0px 3px 0px 0px;

border-radius: topleft topright bottomleft bottomright;

Which corner you want to make rounded you have to mention that corner and make 0px for remaining, see how so simple it is.  But the problem of this code is it won’t much effective in all browser

To use CSS table rounded corners more effective follow this example

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-khtml-border-radius: 20px;

border-radius: 10px;

border: 1px solid;

webkit property used supports in Chrome browser and –Moz property supports Firefox and khtml supports on old Konqueror Browsers.

How to make css3 rounded corners image

As mentioned above css3 rounded corners image also the same, but the place where are you using is different. To make image rounded using css, you have to border radius in img tag.

Example to rounded corners CSS image Code

<img id=”Header1_headerimg” style=”display: block; border-radius: 56px;” src=”log.png” alt=”Css rounded”></img>

Here some samples for you

1)      Full Radius 2) Top Left 3) Top Right 4) Bottom Left 5) Bottom Right

rounded corners CSS rounded corners CSS rounded corners CSS rounded corners CSS rounded corners CSS

 

css Firefox
Mozilla Chrome
Opera IE

If you have any doubt in this above css table rounded corners tutorial, kindly share your problem via comment with us.

Load More Related Articles
Load More By Krishna Veni
Load More In How to

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

10 Websites for Students to Earn Money Online

Online earning is one of the most popular trends these days to earn money. Basically, the …