CSS video tutorial: How to create rounded corners box simple effect with photoshop and css

In this post I will show how to create rounded corners using background images created in Photoshop.

We will create an image for each corner, then we will use those images in css code to place them at their destination.

This technique is very simple and is working in all the browsers.

I am familiar with some techniques and tricks which can create similar result without using images, this will save some resources but the problem is that it will work just in some browsers and will give bad results in others, that is why I am not using those tricks.

This is the code I used in this lesson:

HTML File:

<div>
<div>
<div>
<div>
OUR TEXT
</div>
</div>
</div>
</div>

CSS File

.bl
{
background: url(img/bl.gif) bottom left no-repeat red;
width:200px;
}

.br
{
background: url(img/br.gif) bottom right no-repeat;
}

.tl
{
background: url(img/tl.gif) top left no-repeat;
}

.tr
{
background: url(img/tr.gif) top right no-repeat;
padding:10px;
height:200px;
}

Hope this tutorial was useful for you.

If you really liked it you are welcome to rate it on Youtube, that will really help.

I will be happy to hear your comments here or any question by email.

You are welcome to subscribe to my mailing list, RSS feed or Youtube channel to get updates whenever I upload any new posts.

Related Posts

1. Video Tutorial: How to create rounded corners textbox in css using photoshop with icon
2. Video tutorial: How to create CSS button rollover effect menu web design tutorial
3. How to CSS video tutorial: Simple image frame border effect with css
4. Video tutorials: How to create image watermark effect in CSS – protect your images
5. Video tutorial: Image opacity effect with CSS and JavaScript events

(1 votes, average: 5.00 out of 5)

 Loading ...