Finally! A solution for creating square corners on your website. You’ve probably read countless tutorials on how to make rounded corners, but a simple, elegant solution for creating square corners has yet to emerge.

Tulsa Unprofessionals to the rescue! Below is our coveted 84 step process for creating beautiful square corners. Follow our lead and you’ll soon be basking in splendid perpendicular glory.

1. Compile Apache 2.24023 with mod_perl, mod_log_forensic, and mod_vhost_alias. Do not compile mod_perl as a DSO and keep apache in a chroot jail. Install Mysql 3.23 using yum, Perl 5.8, and /usr/bin/fortune. Set up load balancing and make sure mysql database connections are pooling properly. rm -f the main page for “ls” (usually stored in /usr/share/man). Create an alias in .bashrc that echos ‘the fat man stands alone’ every time you CD to a new directory.

2. With a yard stick, measure the approximate width and height of your computer monitor

3. Using a hot pink highlighter, draw a 4x scale outline of your computer monitor on a large sheet of butcher paper

4. Squeeze the drippings from an uncooked 12 oz porterhouse steak onto the butcher paper, smear the steak around until a greasy sheen is clearly visible

5. Place a housecat (latin: felis catus) in the center of the outline, if the cat leaves the boundaries of the monitor, squirt repeatedly with a water bottle (see: overflow: auto)

6. Walk along the edges of the outline and count the number of steps required to make a complete loop

7. Gently stroke the porterhouse-scented kitty

8. Multiply the number of steps taken in step 6 by everyone’s favorite irrational algebraic number: 1.61803399 (phi)

9. Using the computed product, plot the approximate height and width of your target div using MS Paint. Export it as a 50 megabyte TIFF file and upload this to your webserver.

10. Open up your HTML file and create four divs: one above your bordered element, one below, and two floated to the side. Use the clearfix CSS hack and autoclear these elements using the :before and :after CSS selectors. (Warning: Not supported in 94.2% of all browsers). Make sure the top and bottom elements are display: block and your doctype is XHTML 1.0 Strict. Using prototype.js, call Element.hide(targetDiv) and Ajax.Request to a PHP script that calls getimagesize() on your previously uploaded TIFF. Apply these dimensions to your target element using $(’targetDiv’).style.height = ‘x’;

11. Huff a rag soaked in paint thinner

12 - 83: Once dementia has set in, enjoy a 13 hour parasailing excursion with imaginary cherub-beasts. Relax comfortably on the sands of space and time and sip mango mojitos. Do not listen to the golden pigs, they speak only lies and treachery.

84. When sobriety returns, add the following line to your CSS file:
p { border: 1px solid #000; }

That’s it! Square corners are now yours for the taking.*

*Warning, this method may not be compatible with Firefox 1.5 on Windows XP build 902345, Firefox 2, FirePig 9, Pigs on Fire, IE6 with the Google Toolbar, Safari 1.2+, IE7 Build 908234, IE 5+, Netscape 4.8, Camino, Opera, Web TV, and any version of lynx ever made.

COMMENTS / 7 COMMENTS

SPEAK / ADD YOUR COMMENT

Name (required)

Mail (will not be published) (required)

Website