HOME | PHP Tutorial | CSS
facebook icon
AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP
PHP Tutorial

PHP forms
HTML Tutorial

CSS Tutorial

CSS border radius


The border-radius CSS property rounds the corners of an item's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

CSS border radius - how to create - example


With CSS, you can give each element "rounded corners" using proprietary border-radius.

Example 1:

#example-coner1 {
border: 2px solid red;
padding: 10px;
border-radius: 15px;
}

#example-coner2 {
border: 2px solid blue;
padding: 10px;
border-radius: 20px 6px;
}

HTML cod above will display this result for CSS border radius - how to create -

css border radius

Note: The four values for each radius corner are given in this order: 1. top-left, 2. top-right, 3. bottom-right, 4. bottom-left. If bottom-left is missing it is the same as top-right.

CSS border-radius - Specify each corner - How to create

If you specify a single border property radius value, this radius will be applied to all four corners.
However, you can specify each corner separately if you want. Here are the rules:

Four values: the first value is valid for the top left, the second value is applied from the top right, the third value is applied to the bottom right, and the fourth value is applied in the lower-left corner
Three values: the first value is valid for the top left, the second value is for the top-right and the lower-left, and the third value is applied to the bottom-right
There are two values: the first value is applied to the top left and right-hand corner, and the second value is applied from the top right and the lower-left corner
A single value: all four corners are rounded evenly
Here are three examples:
1. Four values ​​- border-radius:15px 50px 30px 5px:
2. three values ​​- border-radius:15px 50px 30px:
3. There are two values ​​- border-radius:15px 50px:

Example 2:
.corner-radius4
{
border-radius:15px 50px 30px 5px;
padding:10px;
width:250px;
height:180px;
border: thin solid #0C0;
margin-left: 18px;
margin-top: 10px;
float: left;
}
.corner-radius5
{
border-radius:15px 50px 30px;
padding:10px;
width:250px;
height:180px;
border: thin solid #0C0;
margin-left: 18px;
margin-top: 10px;
float: left;
background-color: #9FF;
}
.corner-radius6
{
border-radius:15px 50px;
padding:10px;
width:250px;
height:180px;
border: thin solid #0C0;
margin-left: 18px;
margin-top: 10px;
float: left;
background-color: #FF6;
}
The HTML cod above will display this result -

css borderradius


CSS border radius CSS border radius - css tutorial

3191. How to include, how to incorporate CSS in HTML, css tutorial
How to include, how to incorporate CSS in HTML css tutorial
https://www.agernic.com/css-tutorial/how-to-include-how-to-incorporate-css-in-html.html

2707. CSS Lists - CSS tutorial
EchoEcho.Com : The complete CSS tutorial
http://www.echoecho.com/csslists.htm

2592. How to include, how to incorporate CSS in HTML, css tutorial
How to include, how to incorporate CSS in HTML css tutorial
http://www.agernic.com/css-tutorial/how-to-include-how-to-incorporate-css-in-html.html

3181. CSS background, Color, Background Image, css tutorial
CSS background, Color, Background Image css tutorial
https://www.agernic.com/css-tutorial/css-background-color-image-css-tutorial.html

2230. CSS Tutorial - External, internal or inline
The inline CSS code is the one that goes inside the head section of the HTML document. This is very useful when you want to give a specific page, his own custom style. The is no difference between the CSS code that you place inside an external file and t
https://tutorialehtml.com/en/css-tutorial-external-internal-or-inline/

3188. CSS Text Style Bold - Text Decoration - Text Shadow, css tutorial
CSS Text Style Bold - Text Decoration - Text Shadow css tutorial
https://www.agernic.com/css-tutorial/css-text-style-bold-text-decoration--text-shadow.html

Your add here
PHP rtrim() function

PHP define() function

PHP implode() function

PHP str_split() function

PHP htmlentities() function

PHP substr() function

PHP wordwrap() function

PHP strlen() function

PHP strtoupper() function

PHP similar_text() function

PHP htmlspecialchars() function

PHP htmlspecialchars_decode() function

PHP html_entity_decode() function

PHP strrchr() Function

PHP isset() Function

PHP md5() function

Learn PHP online from the basic to the advanced
PHP Syntax
HTML table style, HTML border, width and height
PHP mysqli_query() Function - mysqli query
SQL like syntax and example
HTML List Bullet