How to make a div with rounded corners

Question

How do you make a div so that its border corners are rounded?

Cisco

Answer 1

Here it is:

<style type="text/css">
div.test
{
    width: 115px;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 15px;
    -moz-border-radius: 15px;
}
</style>
<div class="test">This is some text!</div>

Quiroz

It's best if you remember to use prefixes such as "moz" (for Mozilla) and "webkit" (for Safari and Chrome.) Maybe there are more that I don't know about. – Quiroz

Answer 2

Use the border-radius property. The higher the specified amount (typically in px), the more rounded your shape. Example:

myDiv { border-radius:30px;}

Hope that helps.

Arni

Answer 3

add this css:

border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;

Spicule

Answer 4

With CSS add the code: border-radius: 10px.

I use 10px for example, but you can experiment with however amount of pixels you like.

Squatter

Answer 5

If you don't want to rely on pixels, you can always use %

border-radius: 50%;

Jammiejammin

Answer 6

Just use "border-radius" css property like this:

div {
     border-radius:8px;
}

Tilla