• Home
  
• Copyright Law
  
• Oragami Elephant
  
• The Dragon King
  
• Donate
• Modularization Plan
• Site Plan
  
• Style Guide
• Learning Report 1
• Learning Report 2
• Learning Report 3
• Learning Report 4
• Learning Report 5
• Learning Report 6
• Learning Report 7
• Learning Report 8
• Colophon

Learning Report #7
Making a div box with rounded edges

The resource I used was a tutorial from http://www.devwebpro.com/25-rounded-corners-techniques-with-css/ and the open source image editing software GIMP.

What I learned

A div box with rounded corners can be a great way to have information pop up on your site. I used mine for news on the home page of my site. It is good because it distinguishes content inside of it from other content. It says to the user "hey, this is something somewhat related, but it is it's own bit of information".

Some of the benefits of div boxes with rounded corners are:

• Once you set up the css to create the box, you can easily use them throught your site.
• It looks smooth and shows you know how to make things look good.
• It uses very little image space, so it doesn't reduce download speed hardly.
• The html and css still validate.

How I implemented rounded corners

Making the corners round was a trick and I actually tried a few tutorials. What needed to happen was a div box nested inside of another div box with one 20 by 20px image of a white circle with a transparent background repeated in the four corners then positioned to give it rounded corners.

One problem that this had is the text was too low, so I put the text inside paragraph tags and used css to raise them up on the page by 3 px.