Bummer! This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse
Border Radius: Part 2

Border Radius: Part 2

6:01

In this video, you'll learn about several border-radius syntactic features beyond just rounding off the four corners. Additionally, you'll learn several practical tips to keep in mind when using border-radius.


Video Transcript

  • 0:00

    [? music playing ?]

  • 0:02

    [Think Vitamin Membership, membership.thinkvitamin.com]

  • 0:07

    [CSS3 Borders, Border Radius: Part 2 with Nick Pettit]

  • 0:13

    Everything I've shown you so far will work in Chrome,

  • 0:16

    Safari, and Firefox.

  • 0:19

    However, there are a few more things to learn about the Border Radius Property.

  • 0:23

    But don't worry, I'll point out the browser compatibility issues along the way.

  • 0:27

    With that said, there is an alternative

  • 0:30

    shorthand syntax that we can use to target individual corners.

  • 0:34

    If we use the Border Radius property on its own

  • 0:40

    and then type in four consecutive values

  • 0:46

    separated by spaces,

  • 0:49

    we can target the corners in a clockwise

  • 0:52

    order starting with the upper-left corner.

  • 0:56

    Now if we refresh the browser,

  • 1:00

    we can see that each one of these corners has a

  • 1:03

    slightly different curvature applied to it.

  • 1:06

    It's very important to point out here that this

  • 1:09

    only works in Chrome and Firefox,

  • 1:12

    but it does not currently work in Safari.

  • 1:16

    And just so you can see, here's how it works

  • 1:19

    in Firefox.

  • 1:22

    Just as you'd expect.

  • 1:24

    Just copy and paste there.

  • 1:27

    And I'll flip over to Firefox, and it looks just like that.

  • 1:31

    Now, what I've shown you so far will work just fine if you want your

  • 1:34

    borders to be perfectly round.

  • 1:36

    However, we can take things a step further and create corners that have

  • 1:39

    an oval or an oblong shape to them.

  • 1:42

    To do this, I will delete what we have so far here,

  • 1:47

    and we'll type webkit-border-radius:,

  • 1:51

    and we'll put two values

  • 1:54

    into the border radius property.

  • 1:57

    And then we'll separate those two values with a slash.

  • 2:02

    And the syntax for Mozilla is

  • 2:05

    exactly the same except for the vendor prefix.

  • 2:10

    The value before the slash

  • 2:13

    will represent the horizontal radius

  • 2:16

    measuring from the corner.

  • 2:18

    The larger the first value is, the wider the curve will appear.

  • 2:22

    The second value is the vertical height of the radius.

  • 2:25

    The larger the second value is, the taller the

  • 2:28

    curve will appear.

  • 2:30

    If we switch back to our browsers,

  • 2:33

    we can see that the border radii are

  • 2:36

    no longer perfectly round and that they have taken

  • 2:39

    on a more oblong shape.

  • 2:42

    And here's what it looks like in Firefox.

  • 2:45

    This trick will work in Chrome and Firefox,

  • 2:48

    but it does not currently work in the latest release of Safari.

  • 2:52

    Now that you know how Border Radius works,

  • 2:55

    let's take a look at some more practical tips to keep in mind when using Border Radius.

  • 2:59

    First, I want to show you one of my favorite tricks.

  • 3:02

    Here we have our same example div as before,

  • 3:05

    without any styling applied.

  • 3:07

    Now, in our style sheet, we can apply a border radius,

  • 3:13

    and we'll set the border radius to

  • 3:16

    a really high value.

  • 3:19

    When we switch back to our browser and refresh the page,

  • 3:22

    you can see that our four-cornered div now

  • 3:25

    looks like a circle.

  • 3:27

    The reason for this is that we've curved our corners so much,

  • 3:30

    the radii are intersecting one another.

  • 3:34

    A nice way to use this might be to highlight a piece of text.

  • 3:37

    You could put a border on your element

  • 3:40

    and make the background color of the element the same as the element behind it.

  • 3:43

    This will create a circle that you can use to lasso up

  • 3:46

    important pieces of text or images.

  • 3:49

    There is a really cool example of this on the web that I'd like to show you.

  • 3:53

    This animated map of the solar system was created entirely in CSS3.

  • 3:57

    [CSS3 Solar System, Alex Giron neography.com/experiment/circles/solarsystem/]

  • 3:59

    The planets are actually just boxes that have a high border radius

  • 4:02

    value applied to them to the point that they look like circles.

  • 4:05

    Pretty neat.

  • 4:07

    Just as a point of style, it's difficult to say arbitrarily

  • 4:10

    when you should use Border Radius and when you shoud not.

  • 4:13

    Really, it depends on the context.

  • 4:16

    What I say is, use it sparingly.

  • 4:19

    Border Radius is a really cool effect, so it's easy to overuse

  • 4:22

    it and curve everything.

  • 4:24

    Already there's lots of sites on the web that are very obviously

  • 4:27

    using Border Radius, because every box on their site has large,

  • 4:30

    rounded corners and they're just using it all over the place.

  • 4:33

    Don't fall into this trap just because you want to show off your

  • 4:36

    Border Radius skills.

  • 4:38

    Instead, you can actually do a lot to soften up the look of your site

  • 4:41

    in a very subtle way.

  • 4:43

    Instead of rounding off every corner on your site with curves,

  • 4:46

    try to use Border Radius sparingly.

  • 4:49

    So, for example, when you apply a border radius,

  • 4:52

    try applying a much lower value, like 10 pixels,

  • 4:55

    or even 5 pixels.

  • 4:59

    Using Border Radius this way tends to make

  • 5:02

    sites look and feel more natural.

  • 5:05

    Finally, you probably noticed that I made no mention of Internet Explorer.

  • 5:08

    That's because all current releases of IE do not

  • 5:11

    support Border Radius at all.

  • 5:14

    However, there is a platform preview of Internet Explorer 9 available now.

  • 5:17

    [IE9 Platform Preview http://ie.microsoft.com/testdrive/]

  • 5:19

    IE9 will indeed offer support for Border Radius.

  • 5:22

    If you target Google Chrome 5 or the platform preview

  • 5:25

    of Internet Explorer 9, you can

  • 5:28

    actually use the Border Radius property without any

  • 5:31

    browser prefixes, like so.

  • 5:38

    IE9 is expected to be released in 2011.

  • 5:42

    So, as you've just seen, Border Radius is a

  • 5:45

    very fast way to create rounded corners

  • 5:48

    without the use of images, tables, or other markup hacks.

  • 5:52

    It's a great tool for making boxy-looking sites feel

  • 5:55

    a lot more organic.

  • 5:57

    [? music playing ?]

  • 5:59

    [Think Vitamin Membership, membersip.thinkvitamin.com]

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.