Round DIV corners - HTML tag & code practical example for blog

Do you want to make the DIV corner round? It is very easy. We can do so using the CSS "border-radius"  property. We can round all the corners. We can round only specific corners. The examples below show how to do.


Example 1 : round all the corners, the same value

<div style="border:3px solid green; border-radius: 25px;">
Contents here ........
......................
......................
</div>

Actual results:

Example 1
Contents here ........
......................
......................

Example 2 : round all the corners, each value
The first value applies to top-left corner, second value to top-right corner, third value to bottom-right corner, and fourth value to bottom-left corner. Values are applied clockwise.

<div style="border:3px solid #26B14A; border-radius:border-radius:15px 25px 35px 45px;">
Contents here ........
......................
......................
</div>

Actual results:

Example 2
Contents here ........
......................
......................

Example 3 : round top-left corner : border-top-left-radius

<div style="border:3px solid #26B14A; border-top-left-radius:35px;">
Contents here ........
......................
......................
</div>

Actual results:

Example 3
Contents here ........
......................
......................

Example 4 : round top-right corner : border-top-right-radius

<div style="border:3px solid #26B14A; border-top-right-radius:35px;">
Contents here ........
......................
......................
</div>

Actual results:

Example 4
Contents here ........
......................
......................

Example 5 : round bottom-right corner : border-bottom-right-radius

<div style="border:3px solid #26B14A; border-bottom-right-radius:35px;">
Contents here ........
......................
......................
</div>

Actual results:

Example 5
Contents here ........
......................
......................

Example 6 : round bottom-left corner : border-bottom-left-radius

<div style="border:3px solid #26B14A; border-bottom-left-radius:35px;">
Contents here ........
......................
......................
</div>

Actual results:

Example 6
Contents here ........
......................
......................

Example 7 : round corners, 3 values
The first value applies to top-left corner, second value to top-right and bottom-left corners, and third value to bottom-right corner.

<div style="border:3px solid #26B14A; border-radius:25px 55px 75px;">
Contents here ........
......................
......................
</div>

Example 7
Contents here ........
......................
......................

Example 8 : round corners, 2 values
The first value applies to top-left and bottom-right corners, the second value to top-right and bottom-left corners.

<div style="border:3px solid #26B14A; border-radius:25px 75px;">
Contents here ........
......................
......................
</div>

Actual results:

Example 8
Contents here ........
......................
......................

Example 9 : round corners : background color
The same is true for applying a background color.

<div style="background: #26B14A; border-radius:35px;">
Contents here ........
......................
......................
</div>

Example 9
Contents here ........
......................
......................

The example on this page is not theoretical but practical. We sometimes experience the difference between theory and practice in running our homepage or blog. Theories are needed to solve problems, but practical solutions are more important. This page is for that.