CSS - Rounded Corners w/ padding applied

programming web dev
1

Thought this would be really easy to do, but everytime I apply padding elements go wacky.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

.roundcont {
	width: 250px;
	background-color: #f90;
	color: #fff;
}

.roundcont p {
	margin: 0 10px;
}

.roundtop { 
	background: url(http://kalsey.com/tools/css/rounded/images/tr.gif) no-repeat top right; 
}

.roundbottom {
	background: url(http://kalsey.com/tools/css/rounded/images/br.gif) no-repeat top right;
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

</style>

</head>

<div class="roundcont">
   <div class="roundtop">
	 <img src="http://kalsey.com/tools/css/rounded/images/tl.gif" alt="" 
	 width="15" height="15" class="corner" 
	 style="display: none" />
   </div>

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
   elit, sed do eiusmod tempor incididunt ut labore et 
   dolore magna aliqua. Ut enim ad minim veniam, quis 
   nostrud exercitation ullamco laboris nisi ut aliquip 
   ex ea commodo consequat. Duis aute irure dolor in 
   reprehenderit in voluptate velit esse cillum dolore eu 
   fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
   non proident, sunt in culpa qui officia deserunt mollit 
   anim id est laborum.</p>
  
   <div class="roundbottom">
	 <img src="http://kalsey.com/tools/css/rounded/images/bl.gif" alt="" 
	 width="15" height="15" class="corner" 
	 style="display: none" />
   </div>
</div>	

<body>
</body>
</html>

Any help greatly appreciated.

2

padding where? looks fine to me

3

[QUOTE=al-do;1983877]padding where? looks fine to me[/QUOTE]

Doh!

In the element below:



.roundcont {
	width: 250px;
	background-color: #f90;
	color: #fff;
      padding: solid 25px #CCC;
}
4 

.roundcont p {
margin: 0 10px;
padding:25px;
}

add it there insted.

5

[QUOTE=al-do;1983891]


.roundcont p {
margin: 0 10px;
padding:25px;
}

add it there insted.[/QUOTE]

Thank you for the quick response. By the way, love the icon.

I’ve been using that example to apply corners to this design below:
http://www.majikmedia.com/template2/

I’ve tried placing the corners in the container tag, but because of padding in the tag it doesn not seem to apply.

Is it possible to have the corners in the same element where padding is applied, or will they not inherit?

Thanks again for your response.

6

well if your using just a solid color you could use this LINK