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.

  • 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
<!-- 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">