karenak Crown



Here's the Categorian Beginner's First Aid Kit - Part Nine /a


Please read Simple Borders first, if you haven't yet.


Advanced Borders



Simple Rounded Corners

This is the simplest way to create rounded corners:

border-radius: 10px;


This will set a 10px radius on all 4 corners

To create this border I used:

<div style="border: 4px ridge blue; border-radius: 10px; padding:25px;">
...
</div>







Advanced Rounded Corners

But you can define all 4 corners separately if you want to:

border-radius: 15px 60px 15px 60px;


Starting with the top left corner these 4 values define the corners in clock-wise sequence.

To create this border I used:

<div style="border: 3px solid green; border-radius: 15px 60px 15px 60px; padding:25px;">
...
</div>






Freestyle Rounded Corners

You can even define horizontal / vertical radi for all 4 corners

border-top-right-radius: 100px 230px; border-bottom-right-radius: 100px 230px; border-bottom-left-radius: 30px;


Available are: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. The first value is for the horizontal, the second for the vertical radius.

To create this border I used:

<div style="border: 3px solid red; border-top-right-radius: 100px 230px;
border-bottom-right-radius: 100px 230px; border-bottom-left-radius: 30px; padding:25px;">
...
</div>







Partial borders

The border need not be complete. You can define merely one, two or three sides of the border and format each separately.

border-right: 6px double green; border-bottom: 6px ridge gray;


Available are: border-left, border-top, border-right, border-bottom.

To create these borders I used:

<div style="border-right: 6px double green; border-bottom: 6px ridge gray; padding: 25px;">
...
</div>







>>>> Part Ten