CSS3 Element Rounded Corners Simplified

CSS3 Basics - Part 16

Forward: In this part of the series we learn how to round the four corners of an html element (box).

By: Chrysanthus Date Published: 23 Jul 2012

Introduction

This is part 16 of my series, CSS3 Basics. In this part of the series we learn how to round the four corners of an html element (box). I assume you have read the previous parts of the series before reaching here, because this tutorial is a continuation. It is the four corners of the borders that are rounded (in this tutorial). So, in order to round the corners of an html element, the element should have a rectangular border, consisting of at least the border-width property and the border-style property. This tutorial gives you a simplified way of achieving rounded corners.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

The border-radius Property
In order to round the four corners of an element, you need what is called the border-radius property. It is a number in px or percentage. If it is percentage, then it is relative to the corresponding dimension of the border-box (see later). Your browser may not support the percentage unit. An example of the use of the border-radius property is:

    border-radius:15px

The bigger the border radius value, the greater the rounding. Read and try the following code samples, noting the use of the border-radius property that affects the four corners:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
<style type="text/css">
    div
        {
            width:450px
        }
    p
        {
            border-width:6px;
            border-style:solid;
            background-color:fuchsia;
            border-color:red;
            border-radius:10px
        }

</style>
</head>
<body>
    <div>
        <p>The first paragraph.<br>The first paragraph.<br>The first paragraph.<br>The first paragraph.</p>
        <p>The Second Paragraph.<br>The Second Paragraph.<br>The Second Paragraph.<br>The Second Paragraph.</p>
        <p>The third paragraph.<br>The third paragraph.<br>The third paragraph.<br>The third paragraph.</p>
    </div>
</body>
</html>

In the above code the border-radius is 10px. In the following code, it is 15px.:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
<style type="text/css">
    div
        {
            width:450px
        }
    p
        {
            border-width:6px;
            border-style:solid;
            background-color:fuchsia;
            border-color:red;
            border-radius:15px
        }

</style>
</head>
<body>
    <div>
        <p>The first paragraph.<br>The first paragraph.<br>The first paragraph.<br>The first paragraph.</p>
        <p>The Second Paragraph.<br>The Second Paragraph.<br>The Second Paragraph.<br>The Second Paragraph.</p>
        <p>The third paragraph.<br>The third paragraph.<br>The third paragraph.<br>The third paragraph.</p>
    </div>
</body>
</html>

In the following code, the border-radius is 20px:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
<style type="text/css">
    div
        {
            width:450px
        }
    p
        {
            border-width:6px;
            border-style:solid;
            background-color:fuchsia;
            border-color:red;
            border-radius:20px
        }

</style>
</head>
<body>
    <div>
        <p>The first paragraph.<br>The first paragraph.<br>The first paragraph.<br>The first paragraph.</p>
        <p>The Second Paragraph.<br>The Second Paragraph.<br>The Second Paragraph.<br>The Second Paragraph.</p>
        <p>The third paragraph.<br>The third paragraph.<br>The third paragraph.<br>The third paragraph.</p>
    </div>
</body>
</html>

I have used three different values for the border-radii above: one in each of the sample code. So, by now, you should appreciate how much rounding a particular border-radius can give.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

CSS3 Element Rounded Corners Simplified

CSS3 Basics - Part 16

Introduction

Related Links

Comments