28

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

6 Answers 6

37

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>
1
  • 5
    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.
    – SilverHorn
    Aug 18, 2011 at 11:54
15

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.

10

add this css:

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

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

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

1

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

border-radius: 50%;

0

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

div {
     border-radius:8px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.