Border Radius: Part 1

5:46

Out of all the new modules in CSS3, one of the most exciting is the backgrounds and borders module. In this video, you'll learn how to use the border-radius property to round off the corners of your page elements.


Video Transcript

  • 0:00

    [? music playing ? ]

  • 0:02

    [Think Vitamin Membership] [membership.thinkvitamin.com]

  • 0:08

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

  • 0:12

    Out of all the new modules in CSS3,

  • 0:15

    one of the most exciting is the border and backgrounds module.

  • 0:19

    In this segment we're going to take a look at a

  • 0:22

    new property called Border Radius.

  • 0:25

    Border Radius is one of the coolest new

  • 0:28

    properties in CSS3 and it's really easy to learn.

  • 0:32

    Border Radius allows you to round off the corners of

  • 0:35

    your page elements without the use of images or ugly tables.

  • 0:39

    The word 'Radius' refers to the

  • 0:42

    radius of an imaginary circle with the origin

  • 0:45

    at one of the corners of an element.

  • 0:48

    You can imagine there being four of these circles.

  • 0:51

    As you set the value for Border Radius higher and higher, you push the

  • 0:54

    origin of the circle more towards the

  • 0:57

    center of your page element and the corners appear more curvy.

  • 1:01

    Now, as you can see, I've created a basic

  • 1:04

    page for us to experiment with.

  • 1:07

    The box in the center of the screen is the one that we'll be

  • 1:10

    applying Border Radius properties to.

  • 1:13

    I'm just switching over to my text editor.

  • 1:16

    You can see that we've set up a basic page

  • 1:19

    with a wrapper <div> and a <div>

  • 1:22

    that we're going to be working with.

  • 1:25

    Now switching over to my style sheet,

  • 1:28

    you can also see that I've applied some basic styling just to

  • 1:31

    kind of get the page in order and make it

  • 1:34

    a bit prettier to look at.

  • 1:36

    None of this is necessary, of course, for Border Radius to work.

  • 1:40

    Now we're going to apply a basic

  • 1:43

    Border Radius to our <div>, and we'll do it in a

  • 1:46

    separate style sheet here.

  • 1:48

    To do this, we'll select the <div>

  • 1:53

    and we're going to type

  • 1:56

    webkit-border-radius:

  • 2:00

    and we'll give it a pixel value.

  • 2:05

    I'll save that out and see what it looks like in the browser.

  • 2:10

    Pretty nifty.

  • 2:12

    You can see that the corners have been rounded off and we've done this

  • 2:15

    without using any tables, any images, or

  • 2:18

    any other weird non-semantic hacks.

  • 2:21

    It just works.

  • 2:23

    Now let's flip back to our code and see what's

  • 2:26

    going on here.

  • 2:28

    I used pixels as a unit for my value, but just about any other

  • 2:31

    CSS unit, like ems for example, will work just fine.

  • 2:37

    Now, you do have to be careful with

  • 2:40

    percentages, because at the time

  • 2:43

    of this recording, they do not work

  • 2:46

    in browsers that are based on the webkit rendering engine.

  • 2:49

    They don't work at all, in fact.

  • 2:53

    However, the first thing that you probably noticed

  • 2:56

    is that I prefixed the border radius property

  • 2:59

    with a dash and the word webkit.

  • 3:02

    Like many other properties in CSS3 that are still in

  • 3:05

    draft form, these properties have browser prefixes.

  • 3:09

    Ultimately, the property name should just

  • 3:12

    be Border Radius without the prefix,

  • 3:15

    but because these standards aren't finalized yet,

  • 3:18

    we need to use these prefixes in order to avoid compatibility issues down the road.

  • 3:23

    Now the Border Radius that I just created will

  • 3:26

    only work in browsers that are based on the

  • 3:29

    webkit rendering engine, such as Chrome or Safari.

  • 3:32

    To make this work in Gecko-based browsers

  • 3:35

    like Firefox, we need to repeat the code,

  • 3:38

    but this time use a Mozilla prefix.

  • 3:42

    And we'll do that just like this.

  • 3:44

    We'll type moz-border-radius:

  • 3:48

    and we'll give it the same pixel value.

  • 3:51

    Now if we switch over to Firefox,

  • 3:55

    we should see that it looks just like Chrome and Safari.

  • 3:58

    Pretty cool.

  • 4:00

    Now if we only want to round off individual corners

  • 4:03

    rather than all four corners, we can do that too.

  • 4:06

    Let's say that we wanted to round off the

  • 4:09

    upper-left and bottom-right corners.

  • 4:12

    We'll switch back to our text editor and we'll delete what we have.

  • 4:17

    And for webkit we'll type webkit-border-top-left-radius:.

  • 4:26

    And we'll give that a pixel value.

  • 4:29

    And for the bottom-right radius,

  • 4:32

    we'll type webkit-border-bottom-right-radius:,

  • 4:40

    and we'll give that a pixel value, as well.

  • 4:44

    And if we switch back over to Google Chrome,

  • 4:48

    we see that it creates a teardrop effect

  • 4:51

    and that the upper-left and bottom-right corners have been rounded off.

  • 4:55

    And of course we can do the same thing with Firefox,

  • 4:58

    but the syntax is just a little bit different,

  • 5:01

    so please pay attention to this bit very carefully.

  • 5:04

    Above or below our Border Radius decorations

  • 5:07

    for webkit, we'll put the properties for Mozilla.

  • 5:10

    We'll type moz-border-radius-topleft:

  • 5:19

    and give that the same pixel value,

  • 5:22

    and then we'll type moz-border-radius-bottomright:.

  • 5:31

    Then if we switch over to Firefox,

  • 5:34

    we should see the same result

  • 5:37

    as we do in Google Chrome.

  • 5:39

    Pretty cool.

  • 5:41

    [? music playing ?]

  • 5:43

    [Think Vitamin Membership, membership.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.