How to add Rounded corners with HTML

Question

I want to round the corners of this image. Here is what I have in my body.....

<body>
   <h1 style="float:left; width:37%;"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h1>
   <div style="float:left; class="websiteart"><img src="website_art.png" height= "100" width= "300"/></div>
   <h1 style="float:right;"><font color="#99CC00"><font face="Verdana">The Art of Gaming</font></h1>
</body>

How can I do this?

Thanks

Answer 1

You can use css border-radius

jsFiddle

.websiteart img{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Answer 2

You can also use border-radius with the "em" notation, which I like most because I find it easier. Example:

-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
-khtml-border-radius: 0.5em;
border-radius: 0.5em;

In this case, you will obtain a perfectly rounded corners.

How to add Rounded corners with HTML

Question

2 answers

solution1
3 2013-06-20 18:34:05

solution2
2 2013-06-20 18:59:35

How to add Rounded corners with HTML

Question

2 answers

solution1 3 2013-06-20 18:34:05

solution2 2 2013-06-20 18:59:35

solution1
3 2013-06-20 18:34:05

solution2
2 2013-06-20 18:59:35