Rounded Corners

We can easily create rounded corners using the CSS border-radius property. However, some browsers use proprietary properties to accomplish this, so we actually need to provide THREE lines of CSS.

We specify how rounded the corner is by providing a size measurement. If we only provide a single value (like 15px in the example), all four corners will be rounded the same.

However, we can provide four separate values, so that all corners are different. These must be provided in a specific order: top left corner, top right corner, bottom right corner, and bottom left corner. Note these are simply moving around the box, beginning at the top left.

Please note I've added a little CSS to make these paragraphs easier to see.

CSS Code

.box {
    border: thin solid black;
    background-color: yellow;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

HTML Code

<p class="box">Notice the corners?</p>

Notice the corners?

CSS Code

.box1 {
    border: thin solid black;
    background-color: yellow;
    -webkit-border-radius: 15px 15px 0px 0px;
    -moz-border-radius: 15px 15px 0px 0px;
    border-radius: 15px 15px 0px 0px;
}

HTML Code

<p class="box1">Notice the corners?</p>

Notice the corners?