If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Our previous tutorials learned you how to make menus, and many other things that can be very useful when you are developing a website. This time i consider to be useful for you, to make some interesting round corners for a fluid box. The element from inside the box will be colored any way you like, without having to paint the transparent part of the corner in the similar background color.
When you decide to make round corners in CSS, things might be bit pain. So, our work shall be as clean as crystal for you. So, to start making your design first, I will tell you some tips, that I used in this tutorial. First, i used an image in PNG8, but if you don’t have Fireworks you can use Gif for IE.
We shall use this text : Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed convallis mauris eu ipsum. Proin volutpat facilisis dui. Sed pretium pulvinar arcu
CSS code, mark up for this as follows:
HTML code:
For our next thing we have to give 4 elements and place our corners into positions with static position. Padding - 10px for the box, so we can position the corners nicely with no affecting inner content. To provide elements for the corners I will use div with nested span, but for reducing mark up you can use a nested ‘b’ element. This can be bit negative for a class.
HTML code:
Div and span have been inserted in the inner element, so we have to drag the top corners upwards into the padding area, and after outwards into free so the transparent corners can show. For the bottom corners is also needed the process.
CSS and HTML code:
For making things bit tidy i added a div content in the middle, for revised HTML as :
Font-size = 10px in CSS.
For holding together everything the codes uses floats, though we can modify and simplify bit and use static elements. The main element is not floated and you will find that margin collapse affects the negative margined corners in Firefox, and to stop that we will add 1px border in the current background color.
CSS code:
HTML code:
For adding a new border, you need to make a new round image with the border color that you want. And then we can add CSS border to the layout to end the image. Though, this time you will need to make 2 images, since the border part of the round corner that extends will show.
The main drawback is once again the extra html mark up required to place each corner and if that upsets you then you may want to try one of the many javascript solutions that are out there.
There is also extra maintenance involved with the negative positioning that we used and you will need to take this into account when you place the corners alongside other elements as they will overlap other elements if you don’t allow about 10px more space than you thought you needed.
In addition, the first examples make a lot of use of floats to hold everything together and you may need to wrap the whole lot in a static element if you need to place it somewhere (see example 4 above). Example 5 is the most stable version and the method I recommend you use but either method will work following the guidelines already outlined.
IE6 is also a little jumpy on fluid floated layouts at small screen sizes but that’s nothing new and something you’ll have to live with. Example 5 does not suffer from this though because the outer wrappers are not floated.
The advantage of this method is that the image is only 300bytes and you are not restricted by size like most other methods that use a massive image to draw the sides and borders. The above examples can have unlimited width and height and carry virtually no overhead in file size apart from the extra HTML of course.
I started out by saying this was simple but due to bugs and browser differences it wasn’t really that simple was it? Please refer to the examples for the full code as there are some fixes in place for the various demos. Have fun playing with the examples and if you find a better method of doing this, or want help with the above, or if you find some bugs then let’s hear from you.