border-radius

Definition

border-radius is a CSS property that allows you to add rounded corners to an element's borders. The property is used to define the radius of the rounded corners. The radius can be defined using a single value, which will be used for all four corners, or using two values, which will be used for the top-left and bottom-right corners and two other values which will be used for the top-right and bottom-left corners.

Examples

This will give the element with the class "rounded" 10px rounded corners and a solid black border:

.rounded {
  border-radius: 10px;
  border: 1px solid black;
}

This will make the element with the class "rounded-corner" a circular shape, with a solid black border:

.rounded-corner {
  border-radius: 50%;
  border: 1px solid black;
}

This will create an ellipse shape by setting the horizontal radius (50%) to be larger than the vertical radius (10%):

.ellipse {
  border-radius: 50%/10%;
  border: 1px solid black;
}

This will create an element with the class "rounded-top" with rounded top corners and straight bottom corners, with a solid black border:

.rounded-top {
  border-radius: 10px 10px 0 0;
  border: 1px solid black;
}

This will create an element with class 'triangle' with red color, that looks like triangle with rounded bottom:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  border-radius: 10px;
}

Values

Best Practices

• Be consistent: When using border-radius to create rounded corners, it's important to be consistent with the radius values you use. For example, if you use a 10px radius on one element, you should use the same value on similar elements.
• Use relative units: When defining the radius value, it's best to use relative units such as em or % instead of absolute units such as px. This allows your layout to adjust based on the user's font size preferences.
• Avoid negative values: If a negative value is given for border-radius, the default value of 0 will be used. So if you want to use negative values, it's better to use CSS transforms.
• Avoid border-radius on small elements: The smaller an element is, the less noticeable the rounded corners will be. Therefore, it's best to avoid using border-radius on very small elements.
• Avoid border-radius with no border: border-radius looks best when used with a border. When you use it without any border, it may look unbalanced.
• use with accessible considerations: consider accessibility when using border-radius, as it can make some element difficult to click, so try to avoid border-radius on clickable element or at least keep the radius small.
• Keep it simple: The border-radius property can create some really cool shapes, but it's best to keep it simple and use it to create subtle, natural-looking rounded corners. Complex shapes can look out of place and detract from the overall design of your layout.

Browser Compatibility