CSS Tutorial

CSS Home

CSS Basic

Introduction Syntax Selectors How To Comments Colors Backgrounds Borders Margins Padding Comments Colors Height/WidthBox Model Outline Text Fonts Icons Links Lists & Tables Max-width Position Z-index Navigation Bar Dropdowns Forms

CSS Advanced

Rounded Corners Border Images Backgrounds Colors Gradients Shadows 2D Transforms3D Transforms Transitions Animations Flexbox

CSS Responsive

Intro & Viewport Grid View Media Queries Images & Videos Frameworks

CSS Grid

Intro Grid Container Grid Item

CSS Examples

Examples
HomeHTMLCSSJavaScript

CSS Rounded Corners

PreviousNext

CSS Rounded Corners

With the CSS border-radius property, you can give any element "rounded corners".

CSS border-radius Property

The CSSborder-radius property defines the radius of an element's corners.

Tip: This property allows you to add rounded corners to elements!

Here are three examples:

Tip: The border-radius property is actually a shorthand property for theborder-top-left-radius, border-top-right-radius, border-bottom-right-radiusand border-bottom-left-radius properties.

CSS border-radius - Specify Each Corner

The border-radius property can have from one to four values. Here are the rules:

Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner): 

Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):

Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):

One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally:

Here is the code:

CSS Rounded Corners Properties

PropertyDescription
border-radius A shorthand property for setting all the four border-*-*-radius properties
border-top-left-radius Defines the shape of the border of the top-left corner
border-top-right-radius Defines the shape of the border of the top-right corner
border-bottom-right-radius Defines the shape of the border of the bottom-right corner
border-bottom-left-radius Defines the shape of the border of the bottom-left corner
â €

Feedback

TERMS OF SERVICE | ABOUT

â €

DevCrib is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using DevCrib, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 2022 by Michael Okwuosah. All Rights Reserved.

DevCrib