HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python Contents
Understanding CSS border-radius
By using the CSS border-radius property, you can define rounded corners for an element:
It is actually a shorthand for four CSS border radius subproperties:
border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius
Each of these subproperties could be used to style each corner individually:
If you add rounded corners for an element that has a background color or a background image, it will be rounded with the border as well and not leak over its lines:
#roundcorners {
border-radius: 30px;
background: url(sheet.gif);
background-position: center top;
background-repeat: repeat;
padding: 25px;
width: 250px;
height: 200px;
}Syntax for CSS border-radius
The syntax for border-radius is simple:
border-radius: value1 value2 value3 value4;
The values can be defined in either length units or percentages. You can specify one, two, three, or four of them:
| Syntax | Example | Explanation |
|---|---|---|
| One value | border-radius: 3px; | All four corners are modified in the same manner. |
| Two values | border-radius: 3px 6px; | The first value is used to modify the top left and the bottom right corners. The second value is used to modify the top right and the bottom left corners. |
| Three values | border-radius: 3px 6px 9px; | The first value is used to modify the top left corner. The second value is used to modify the top right and the bottom left corners. The third value is used to modify the bottom right corner. |
| Four values | border-radius: 3px 6px 9px 12px; | The first value is used to modify the top left corner. The second value is used to modify the top right corner. The third value is used to modify the bottom right corner. The fourth value is used to modify the bottom left corner. |
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Ellipse corners with border-radius
In some cases, you might not need the corners to be perfectly round. To create elliptical rounding, define two values for the CSS border-radius property and put a slash (/) between them. The first value will specify the horizontal radius for the corner, and the second one will define the vertical radius:
#example1 {
border: 5px solid green;
padding: 10px;
border-radius: 3em;
}
#example2 {
border: 5px solid red;
padding: 10px;
border-radius: 3em/6em;
}Browser support
Chrome
Edge
Firefox
IE
Opera
Safari
Mobile browser support
Chrome
Firefox
Opera
