Rounded Borders in CSS3

CSS3 introduced the ability to create rounded borders, allowing rectangular boxes to have curved corners.

The border-radius property controls the rounding of an element's outer border edge.

border-radius: length;

How it works: The rounding effect is created by the intersection between an (ellliptical) circle and the border. This produces the characteristic curved corner.

Key points:

• Accepts numeric values or percentages
• For a square element, setting the value to half the width/height (or 50%) creates a perpect circle
• For rectangular elements, use half the height to achieve a pill shape
• This is a shorthand property with four values: top-left, top-right, bottom-right, and bottom-left corners
• Individual corners can be targeted using border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius

Box Shadow

CSS3 enables developers to add shadows to elements using the box-shadow property.

box-shadow: offset-x offset-y blur spread color inset;

Important notes:

• The default shadow type is outer shadow, but the keyword outset should not be written explicitly—doing so will invalidate the shadow
• Box shadows do not take up layout space and will not affect the positioning of neighboring elements

Text Shadow

CSS3 allows applying shadow effects directly to text using the text-shadow property.

text-shadow: offset-x offset-y blur color;