On 21 Okt, 06:20, "chetan shridhar" <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I have started to work on CSS, I am refering tutorials in the internet to do
> so.
> I wanted to ask how to create a div with rounded corners.
> I have tried to do it using four corner images generated from photoshop, but
> is there any way that we can place all the four images in one div as a BG
> image.
For browsers that support CSS 2.0 it is possible. With 16x16 pixels
corner images you can do something like this:
<div class="rounded">
<h2>Rounded corners</h2>
<p>Lorem ipsum...</p>
</div>
.rounded { background: #eee }
.rounded:before {
content: url('top-right.gif'); text-align: right; background:
#7f7f9c url('top-left.gif') no-repeat;
height: 3em; margin-bottom: -3em; display: block;
}
.rounded:after {
content: url('bottom-left.gif'); background: #eee url('bottom-
right.gif') 100% 100% no-repeat;
height: 16px; margin-top: -16px; display: block;
}
.rounded > h2 { margin: 0; font-size: 1.5em; line-height: 1.5em;
padding: .25em }
.rounded p { margin: 0; position: relative; padding: .5em }
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [EMAIL PROTECTED]
-~----------~----~----~----~------~----~------~--~---
