The Ranger's CSS Tricks #2: Percentage-based Border Radii

N

Nebulon Ranger

Guest
Original poster
[ Partially inspired by this thread in Help Desk: HELP - In need of a [div] wizard ]

CSS is a very powerful thing. If you're like me or @Diana and have been running a website or forum for a reasonable amount of time, chances are you've picked up some interesting design tricks along the way. In a series of threads, I aim to show you, with practical examples, some of these neat tricks. Some won't work on mobile browsers, so just be aware of this when using them.



PERCENTAGE-BASED BORDER RADII

BROWSER SUPPORT:
IE / EDGE 9+
FIREFOX 4+
CHROME 5+
SAFARI 5+
OPERA 10.5+
I'm sure a lot of Iwakuans are very familiar with the basic application of CSS3's border-radius property in rounding div box corners uniformly, but did you know that this property can also accept values in percentage or em, and, more importantly, can accept two values for corner rounding radius? It's a very useful technique for achieving a more unique rounded corner look, and is actually used in XenForo core to produce the end caps for Iwaku's user ribbons! In this entry in my CSS Tricks series, I aim to teach Iwaku, complete with cool examples, how to use dual percentage values to achieve different corner rounding effects. For more information on the border-radius property in general, go here: CSS3 border-radius property.


This effect is used in a lot of tutorials for creating ribbon elements in basic HTML where end caps are required to complete the effect but need to look more natural and less geometric, and, as mentioned above, is used in XenForo's user_ribbons.css core CSS template to create the fancy end caps for the full-width ribbons you see on the author info for Donating Members (like myself) and above. The best example of a ribbon-type element was the ribbon present on Facebook's Introducing Timeline page way back in the day, however, that was a geometric-type ribbon and didn't use border-radius to achieve a more natural look. Discussing the merits of ribbon elements is not why we're here, though! We're here to use the functionality in border-radius to create cool rounding effects.

We'll be expanding on my first entry in this series about transform by using percentages to give our speech bubble a bit more flair, so strap in, because you're in for a CSS3-fueled and div-injected ride! Below is our speech bubble from the last thread.


TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST​


Notice how plain-Jane our rounded corners are? Well, we'll be using percentages and a few extra divs to really make it shine!


BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE​



Look at those corners! Don't they look better and less plain? Well, that's because we used some div and border-radius magic to achieve them! Below is the source BBCode, for your perusal if you're curious about how I did it. I'll follow it up with an explanation on how it works.

Code:
[div=margin:auto;][div=top:55px;left:42px;float:left;padding:20px;border-top:2px solid #AA0000;border-left:2px solid #AA0000;background:#FF0000;transform:rotate(-45deg);z-index:10;] [/div][div=width:85%;margin:auto;padding-top:25px;border-top:2px solid #aa0000;border-left:2px solid #aa0000;border-right:2px solid #aa0000;border-top-left-radius:75% 150%;border-top-right-radius:75% 150%;background:#ff0000;] [/div][div=width:79%;margin:auto;padding-left:25px;padding-right:25px;border-left:2px solid #aa0000;border-right:2px solid #aa0000;background:#ff0000;]
[CENTER]BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE BUBBLE[/CENTER]
[/div][div=width:85%;margin:auto;padding-bottom:25px;border-bottom:2px solid #aa0000;border-left:2px solid #aa0000;border-right:2px solid #aa0000;border-bottom-left-radius:75% 150%;border-bottom-right-radius:75% 150%;background:#ff0000;] [/div]
[/div]

Here, we're using two additional divs to control the top and bottom padding as well as to cap the central square div with nicer-looking rounded corners. We need to do this because if we use only a single div instead of three, text will display outside the div element instead of creating a square space to fill within it, and that's not what we want.

Now, notice the percentages in the border-CORNER-radius properties? What these do is tell your browser to round the corner first x% horizontally, then y% vertically. If you only specify one percentage value, then your browser assumes that both values are equal. These values correspond with the horizontal and vertical size of the div element you're applying the styling to, hence why the vertical rounding in my example is more subtle. Try it out for yourself--take my code and modify it until you get something you like!
 
Last edited by a moderator:
  • Love
Reactions: mango