CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Rounded Corners

CSS provides several properties that you can use to give any element "rounded corners".

CSS Rounded Corners

This is a box with rounded corners

This is a box with rounded corners
This is a box with rounded corners
Air Ballon

We have the following properties to set rounded corners of an element:

The radius applies to the whole background, even if the element has no border.


border-bottom-left-radius

The border-bottom-left-radius property sets the rounding of the bottom-left corner of an element.

This is a box with a bottom left rounded corner
Run code

border-bottom-right-radius

The border-bottom-right-radius property sets the rounding of the bottom-right corner of an element.

This is a box with a bottom right rounded corner
Run code

border-top-left-radius

The border-top-left-radius property sets the rounding of the top-left corner of the element.

This is a box with a top left rounded corner
Run code

border-top-right-radius

The border-top-right-radius property sets the rounding of the top-right corner of the element.

This is a box with a top right rounded corner
Run code

border-radius

The border-radius property is a shorthand that sets all four border radius properties in a single declaration.

This is a box with rounded corners
Run code

You can specify a single radius to make circular corners, or two radii to make elliptical corners.

border-radius: 25% 10%;
border-radius: 10% / 50%;
border-radius: 10px 100px / 120px;

The border-radius property can have from one to four values:

  • When one value is specified, it applies the same radius to all four corners
  • When two values are specified, the first value applies to top-left and bottom-right, the second to top-right and bottom-left corners
  • When three values are specified, the first value applies to top-left, the second to top-right and bottom-left, and third to bottom-right corners
  • When four values are specified, the values apply to the top-left, top-right, bottom-right and bottom-left corners in that order (clockwise)

CSS Border Radius properties

Property Description
border-radius A shorthand property for setting all the four border radius properties
border-bottom-left-radius Defines the shape of the border of the bottom-left corner
border-bottom-right-radius Defines the shape of the border of the bottom-right corner
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