Border Radius in CSS | Rounded Corners with CSS Border Radius and creating shapes with border radius

Border Radius in CSS | Rounded Corners with CSS Border Radius and creating shapes with border radius
CSS Border radius shorthand property is fantastic for creating rounded corners for your html elements. Border radius in css can help you create different kind of CSS shapes such as circle, ellipses, quarter of a circle, semi circles or various other parabolic shapes.
Border radius property can be used to round the corners of a box with separate horizontal and vertical radii values, hence giving an elliptical roundness to the corners of an element instead of a circular corner roundness.
Though, we can use the individual border-radius properties such as: "border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius" applied in clockwise order, to control the roundness of an individual corners. However CSS border-radius shorthand property makes it much concise and easy to understand. We can specify both horizontal radius value and vertical radius value using the single border-radius property. We need to use slash (/) to separate these two values.
Border radius shorthand official syntax looks like:
border-radius: length | percentage{1,4} [ / length | percentage{1,4} ]?
Border radius can accept any valid css length values such as px, em, rem, pc etc.
====================SOURCE CODE=====================
Border Radius in CSS :
To Practice Along with Tutorial Code (Demo):
bit.ly/2sl2u3S
Final CSS Border Radius Source Code
bit.ly/36x3HnG
=====================================================
If you have any questions, just comment below in comment section. I will try to respond as soon as possible.
Like, share and comment!
Thanks
============Useful Tutorials=============
Writing HTML and CSS Faster using Emmet
goo.gl/uw6Uxi
Flexbox based Responsive Image Gallery
• CSS Image Gallery Tuto...
Responsive Image Gallery using HTML5 and CSS3 - Part - 1
• How to create responsi...
Responsive Image Gallery Using HTML5 and CSS3 - Part - 2
• How to create responsi...
Distributing images evenly in a fluid container
goo.gl/w2O1kR
Creating CSS3 Tooltip without using jquery or javascript
goo.gl/ah10aw
Styling placeholder text using css3
goo.gl/i4CZai
Creating three column responsive layout
goo.gl/uj46tI
How to create simple css3 preloading animation
goo.gl/GqjXCr
***********************CONTACT and RESOURCES************
Find all the source codes here:
codepen.io/sma...
Follow on Twitter
/ amit4kp
Add on Facebook
/ kumaramit24chd
Like Page on Facebook
/ smashtheshell

[@esfmankocev]

thank you very much this was helpful

[@imanparvizi9973]

awesome