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.

  • 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
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">