In this video, we're going to introduce the border-radius style.

Use our webpage as an example, it could be improved by changing the straight lines and corners. to rounded edges. This adds a clean appearance to the page that we will focus on for this session.

Before that, go to "www.border-radius.com". This free service allows you to experiment with different border values, so you can find the design most appealing to you.

Experiment with the different values, to get a solidified idea what each looks like. Once you've decided on a style, copy the code and paste it into the appropriate tag in your CSS file.

In our case, the value of 3 is suitable, so I'm going to copy this code. Before pasting, create another element on our HTML page for our subheading. For this, I've created a <div> tag, and a <h3> for my subheading. So, the code is as follows:

<div id="sub">
  <h3>My Subheading</h3>
</div>

Now, let's go to styles.css and define the style for sub. First, I'm going to give a background color that matches the rest of the content, then paste the code we copied earlier from "www.border-radius.com". I'm also going to do some padding and margins.

So, this is the code:

#sub {
  background-color: #e8e8e8;
  margin-top: 10px;
  padding: 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

And the web page looks like this:

If you see, our subheading has rounded edges while the other elements have straight edges. In a real-world application, you shouldn't have such conflicting styles. So, I'm going to paste the code for rounded edges to other elements too.

Also, I'd like to align all my headings at the same level by adding some padding to the sub element. Our left padding alone should be equal to 42px, which is what we've given for our previous heading. The rest of the sides can be just 5px.

#sub {
  background-color: #e8e8e8;
  margin-top: 10px;
  padding: 5px 5px 5px 42px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

Now, we know more about a useful tool called border-radius, as well as know how to implement rounded edges in our application.

Resources

• Border-Radius Generator