Cascading Sytlesheet Examples
Boxes With Rounded Corners Using CSS
To make rounded corners using css, create two, nested DIVs. The outer DIV has top and bottom borders (1px wide) and the inner DIV has right and left borders (1px wide).The right and left borders are shifted out 1px using margin-right(left): -1px. All borders and inner DIV background color the same. This works in Firefox, haven't checked IExplorer.
<div
style="border-top: 1px solid #ccc;
border-bottom:
1px solid #ccc;
padding: 0px;
text-align:
center; width: 300px;">
<div
style="border-left: 1px solid #ccc;
border-right:
1px solid #ccc;
margin-left:
-1px;
margin-right: -1px;
background-color:
#ccc:">
<p style="margin:
0pt;
padding: 0pt;
color:
red;">
This is the text<br> and
here is more text</p>
</div></div>
Here's what the code above produces:
This
is the example
Here is more text
Suggestions? Comments? Use our contact page.
Back to programming examples and notes.
