adding padding removes rounded corners

prateek88 · 10-08-2012, 12:05 PM

I am having a content area with a background image, in that i added border-radius:20px and then tried to pad-left about 25 px but it romoves the rounded corners. What can i do?

Code:

#content{
height: 650px;
margin: auto auto;
width: 957px;
background: url(img.png) top center no-repeat;
color:#fcfcfc;
border-radius: 20px;
}
div#content{
padding-top: 20px;
padding-left: 20px;

}

shyagrawal · 10-08-2012, 12:28 PM

can you please paste html code also?

prateek88 · 10-08-2012, 12:33 PM

Sure, here it is

Code:

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Welcome</title>
        <link href="styles/layout.css" rel="stylesheet" type="text/css" />
        <link href="styles/menu.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>XpertCareers</h2>
            
        </header>
       <div class="container">

            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a class="hsubs" href="#">Menu 1</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 1</a></li>
                        <li><a href="#">Submenu 2</a></li>
                        <li><a href="#">Submenu 3</a></li>
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 2</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 2-1</a></li>
                        <li><a href="#">Submenu 2-2</a></li>
                        <li><a href="#">Submenu 2-3</a></li>
                        <li><a href="#">Submenu 2-4</a></li>
                        <li><a href="#">Submenu 2-5</a></li>
                        <li><a href="#">Submenu 2-6</a></li>
                        <li><a href="#">Submenu 2-7</a></li>
                        <li><a href="#">Submenu 2-8</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 3</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 3-1</a></li>
                        <li><a href="#">Submenu 3-2</a></li>
                        <li><a href="#">Submenu 3-3</a></li>
                        <li><a href="#">Submenu 3-4</a></li>
                        <li><a href="#">Submenu 3-5</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="#">Menu 6</a></li>
                <li><a href="Login.html">Login</a></li>
                <div id="lunar"></div>
            </ul>
			</br>
			
        </div>
		
		<div id="content">
			
			hello world hello worldhello worldhello worldhello </br>
			hello world hello worldhello worldhello worldhello </br>
			hello world hello worldhello worldhello worldhello </br>
			hello world hello worldhello worldhello worldhello </br>
			
		</div>
		
		
		
		<footer>
	        <h2>&copy; 2012 <i>TechGeeks<i> |</h2> <a class="tzine">Design by TechGeeks Team
        </footer>
    </body>
</html>

shyagrawal · 10-08-2012, 12:35 PM

Thanks. Please attach image file also.

prateek88 · 10-08-2012, 07:32 PM

this worked for me

Code:

div#content #maincontent{
padding-top: 20px;
padding-left: 20px;

}

added a div tag with maincontent id inside body but still the bottom curves are not visible