Encyclopedia Dramatica:Formatting/Rounded Corners

From Encyclopedia Dramatica
Jump to navigation Jump to search

Undeniable facts

Rounded Corners are made from the combination of the tears of Jesus and the anal seepage of elderly women. Science shows that rounded corners are purveyors of orgasmic energy, and that use of Rounded Corners qualifies one for deification into the pantheon of ED gentrifiers.

They are easy to use, and there's no real reason NOT to use them, frankly, unless you like pointy corners on objects, and that makes you a masochist.

Preface: The History of Rounded Corners

Before rounded corners, there were only sharp corners, and people were continually impaling themselves on such corners. Then, like a beacon in the night, Mozilla and Webkit emerged from the dark ages of the web and gave birth to a new and wonderful beauty of nature: a corner, not defiled by a point, but gently curving like a woman's body around an asymptote and rejoining its straight-line cousin 90o after its origination point. It was such a line as had nary been viewed by virgin eyes on the internets before 2008, but now it was here, and here to stay.

Slowly it permeates, for 70% of your e-peers are still unable to see rounded corners, despite their unchallenged and well-documented existence. IE, you see, is so far behind the curve of modernity that it refuses to allow this blasphemy of a corner not defined by a point to penetrate any further than it already has. But it neglects to reckon upon the march of progress; as Safari and Firefox trumpet their dominance by addition of ever-more Web 2.0 features, Microsoft finds its market share eroded by the acid of the future, feasting on the internet of the past.

Acknowledging that the majority of the Internet is incapable of viewing the fully anti-aliased (smoothed) glory of the rounded corner, ED capitulates and uses a jury-rigged rounded corner known as The Roundbox on its front page, and while it works if you absolutely must have it, it's also very complicated to implement, and frankly the result is less than stunning. The only real advantage to using the Roundbox over the Rounded Corner method below is that everybody who views the creation will be able to see it in its same lackluster state.

LOOK AT MY CORNERS IN ALL THEIR LAME, UN-ANTI-ALIASEDNESS

The Roundbox gives you ZERO control over how big you want the curve to be, and it has many limitations that make it unattractive, especially when dark colors are used as the background hue. Comparatively, the method below is both incredibly easy and superior in almost every respect.

The Rounded Corners Method

There's only a few things you must remember when making use of the RC method: for any area of a page or table where you can insert a style="(insert formatting here)", you can also insert rounded corners. The formula for rounded corners is simple:

style="-moz-border-radius: 25px;"

and

style="-webkit-border-radius: 25px;"

The first one of the two designates rounded corners for the mozilla-based browsers (Firefox), and the second one designates rounded corners for Webkit-based browsers (Safari). The numerical value for "px" designates how large the curve will be; how much space it it will take up. A larger numerical value indicates a larger curve. Safari and Firefox are the only two browsers that support the addition of rounding to corners, and both are anti-aliased, which makes the curve smooth and attractive. You'll want to use them combined, because that allows the highest proportion of internet users to view your work. To accomplish this, you can use the following style specifications, in addition to ones already specified.

style="-moz-border-radius:25px;-webkit-border-radius:25px;"

A practical table-example of this technique is as follows:

{| style="width:100%; padding:20px;background-color:blue; -moz-border-radius:20px; -webkit-border-radius:20px; border: 5px solid black; text-align:center;"
| style="color: white; -moz-border-radius:15px;-webkit-border-radius:15px; background-color:black; padding:10px; font-size:170%;"| '''THIS IS A PRACTICAL EXAMPLE'''
|}
THIS IS A PRACTICAL EXAMPLE