What are we facing?
I want to use border but not with square corners, instead I prefer to place rounded corners to my boxes.
The Solution
Actually it's impossible to create any kind of rounded shapes just with HTML and CSS code, that's why for this exercise we must need to use images to represent the corners of the boxes.
A new question is: What's the better way to introduce those images with our boxes? A very maintainable way to do this is by using the power of CSS.
We must create a normal text box with four corner images and with an image to repeatedly create the parallel lines of the box, as the following:
- Insert the four images as background with CSS.
HTML code.
<div class="c3"><div class ="c4"><div class="c1"><div class="c2">
l'arte di apprendimento
</div></div></div></div>
CSS code.
.c1 {background: url(c1.gif) 0 100% no-repeat}
.c2 {background: url(c2.gif) 100% 100% no-repeat}
.c3 {background: url(c3.gif) 0 0 no-repeat}
.c4 {background: url(c4 .gif) 100% 0 no-repeat; padding:10px}
- Add a border to the box (with more images).
HTML code.
<div class="l1"><div class="l2"><div class="l3"><div class="l4"><div class="c3"><div class ="c4"><div class="c1"><div class="c2">
l'arte di apprendimento
</div></div></div></div></div></div></div></div>
CSS code.
.l1 {background: url(dot.gif) repeat-x 0px 0px}
.l2 {background: url(dot.gif) repeat-x 0px 100%}
.l3 {background: url(dot.gif) repeat-y 0px 0px}
.l4 {background: url(dot.gif) repeat-y 100% 0px}
Some external references
[advertisement] Try
Aggiorno for free, the assistant tool for web development you always wanted.
