Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Rounded Corners

  • We are going to take a CSS property that allows us to create rounded corners for content on our web page
  • The CSS property that creates rounded corners is the border-radius property
  • Screens are based on pixels which are always square so it has always been difficult to create a rounded look for page content
  • We used to have to create gif images with transparent pixels on the corners, and add those images as background images in order create a rounded corner effect
  • CSS3 makes this very easy to do now using the border-radius property that creates round corners
  • We are going to add rounded corners to the 3 buttons on our homepage, we will also create rounded corners for the bottom of the main nav bar area
  • Open rounded-corners.html
  • Here is the basic code for a background gradient:
    border-radius:9px; this applies the same radius to all 4 corners
    We can try this code as is in the browsers & see if it is supported
  • Try it in each browser, if it does not work add the -ms, -o, -webkit or -moz prefix

Rounded Corners

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Curve Corners with CSS 0:14
    • Add Border Radius Property
  • Preview in Browser 2:39
  • Enable Gradient and Drop Shadow 4:11
  • Edit Drop Shadow Color 5:44
  • Preview in Browser 5:48
  • Summary 6:56

Transcription: Rounded Corners

We are now going to take a look at the rounded-corners property; it is technically not an official property (it is not called rounded-corners, anyway), but that is what we are going to be doing to our box on the page.0000

I want to give you a feel for how to curve those corners using CSS, and I think the gradient, rounded corners, and drop shadow properties in CSS3 are very exciting, because they can really change the look of your web pages and start giving them the look of depth, without adding to your page size--because we don't need to be adding all kinds of images to our pages now, like we used to, in order to give it that same look.0014

What I have is a rounded-corners.html file in your Files panel; and this is a basic box that we are going to play with, rounding out the corners in the browsers that support it.0046

And we are going to use Dreamweaver to do this one, and the CSS Styles panel; so let me go ahead and open that up.0061

If we take a look at this in the browser as of right now, you can see, it is definitely square corners.0069

Pixels on your monitor are square, so the corners of all of our boxes are square, as well.0076

But what we have here is a background color for this box; we also have a border color assigned; so I am going to click the Add Property, and I'm going to add a new CSS3 property; and this one is border-radius.0085

When I select that, I get this little icon on the right-hand side, and it is really the easiest to work with.0104

If I click on that, you can see, it even gives you the sequence of the items you want; so let's use Same for All, and what I am going to do is add a corner of 7 pixels on each one of these.0111

I'll save this, and let's put it in the browser and see if it works.0129

Here it is in Chrome, and there it is--nice rounded corners.0134

Now, that is about a 7; I can round it a little bit more--so let me click on this: you can see, whatever I put in this area, it automatically applies all the way down.0140

I am going to raise this up--let me do 09 we'll get a good idea of what this is like.0152

I'll take this back out to Chrome...and there is 09 that is a lot more rounded; so that gives you a taste of the pixel widths, and if you are unsure, just pick a number and go from there.0159

That is Google Chrome with the border-radius (specifically) property; let's take a look in Firefox, and we will see what Firefox does to this--no problem: nice rounded corners.0173

Now, I am not using a proprietary prefix at all; and it wasn't long ago--even just a couple of months ago--where I actually had to do that in some of these browsers; no longer.0191

So, test your browsers, and just double-check: Safari has nice rounded corners, also; and you may have an idea of what Internet Explorer 8 is going to do--you can see, it just keeps them square.0204

Now, adding that particular property does not mess anything up; so I can add border-radius; the browsers that support it work great; the browsers that don't--it just shows up square--not really a big deal.0219

But that is the border-radius property; and you can see, it was very simple to add; just make sure you do your proper testing in the browsers that you are going to support and your specific version.0235

Now, I am going to go into the code; I actually have some things commented out in here for you on this file; and I am going to select, on line 24 here--I am going to go to the end and hit Enter or Return; then, I am going to select everything in lines 25 through 30.0252

I can do it that way, or I can just click on 25 and drag all the way down to 30; that perfectly selects everything in the line; and I am going to click this Remove Comment.0272

Let's put all of these pieces together that have been added; so, the border-radius curves the corners; the background-image with the gradient adds a gradient to the box; and my box-shadow adds a drop shadow to my box.0286

I'll click Remove Comment; let's take a look at what our box looks like with all of these applied.0304

I'll go ahead and do a Save All; it's good to get in the habit of doing and working with Save All.0311

And there is our box: you can see, that is a very different box from the original one that we looked at.0318

Now, let me take this one and set it over there; I do want to change this color--it's a bit bold; if I lighten it up a little bit, I think I can keep the drop shadow that size--just make it a little bit lighter.0326

And I could do that just by doing that here; so, I could make it a grey--let me do a 999, and we'll take a look at it in Firefox with everything added.0341

These properties are kind of fun to work with; and you can customize the colors...and look at how nice that box looks in Firefox!0354

I made it a lighter grey, more typical drop shadow; so, there it is in Firefox; here it is in Safari; and we'll save Internet Explorer for the end.0362

But it's amazing to me that CSS can take care of all of that for me--no more images to make; no more tons of file size being added because we need images (and then I go to change a color or want to change the shadow--I have to go out and recreate a new image).0375

These are some fun properties that you can start adding to your web pages; and if they don't work in the browser, this is what it would look like.0394

So, no, it is not too pretty--but at least it still works; my content shows up correctly within even a very old version of Internet Explorer.0404

Those are three of the properties within CSS3 that are available to you now to work in; you can see, the gradients still need proprietary code; border-radius and box-shadow are now working in Safari, Firefox, and Chrome without the need for any proprietary code for either the property or the value.0417

Those are the CSS3 properties you could start using now within your web pages.0443

Thanks for watching; see you in the next lesson!0449