CODEWITHSUNDEEP
htmlcssimageborder
user2426533
user2426533

Reputation: 501

How to add Rounded corners with HTML

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

Upvotes: 0

Views: 1268

Answers (2)

javier_el_bene
javier_el_bene

Reputation: 450

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.

Upvotes: 2

Vitim.us
Vitim.us

Reputation: 22138

You can use css border-radius

jsFiddle

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

Upvotes: 3

Related Questions