border-radius

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Initial value as each of the properties of the shorthand:border-top-left-radius: 0border-top-right-radius: 0border-bottom-right-radius: 0border-bottom-left-radius: 0
Applies to all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.

Syntax

  
border-radius: 50%;
  

Values

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.
Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

Browser support

border-radiuschrome4edge12firefox4ie9opera10.5safari5
elliptical_borderschrome1edge12firefox4ie9opera10.5safari3
percentageschrome8edge12firefox4ie9opera11.5safari5.1
4_values_for_4_cornerschrome4edge12firefox4ie9opera10.5safari5

We use cookies to improve your experience. Learn more in our Privacy policy.

×