Convert CSS Box to Rounded Corner?

Question

I haven't dove into HTML for a while...I'm trying to convert this box into the same size/shape but with rounded corners. Looking at the Syntax for rounded-corners I'm not sure how to work with max-height/width in rounded corners?

Here are my current div tags:

    <div id="content" style="background: rgba(0, 0, 0, 0.4);">
    <div style="max-height: 600px; max-width: 700px;">
    [content]
    </div>
    </div>

Any help appreciated!

Answer 1

You can just add the border-radius rule... there wont be issues.

<div style="max-height: 600px; max-width: 700px; border-radius: 10px;"></div>

or...

<div class="med-round"></div>

+

.med-round {
    max-height: 600px; 
    max-width: 700px; 
    border-radius: 10px;
}

Answer 2

As mentioned above, you can use the border-radius property, but I want to add:

-don't forget to add the webkit prefix:

#content{
-webkit-border-radius: 4px;
border-radius: 4px;
} 

-don't forget to check if this or other features will work across browsers (border-radius doesn't work on IE8)

You might find these links useful: http://caniuse.com/ http://css3generator.com/