CSS Rounded Borders
The border-radius property rounds an element's corners, from a gentle curve to a full circle.
Rounding corners
The <border-radius> property softens the sharp corners of an element's box. A small value gives a subtle curve, and it works whether or not the element has a visible border, since it also clips the background.
Gently rounded
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid #ddd;
border-radius: 8px;
}
</style>
</head>
<body>
<div>Rounded box</div>
</body>
</html>Making a circle
Set the radius to 50% on a square element and the corners round all the way into a circle. This is the standard trick for circular avatars and icon buttons.
A circular avatar
<!DOCTYPE html>
<html>
<head>
<style>
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}
</style>
</head>
<body>
<img class="avatar" src="avatar.jpg" alt="Profile avatar">
</body>
</html>Rounding corners individually
Like other box properties, border-radius accepts up to four values for the top-left, top-right, bottom-right, and bottom-left corners. You can also target one corner directly.
Only the top corners
<!DOCTYPE html>
<html>
<head>
<style>
.card-top {
border-radius: 12px 12px 0 0;
}
</style>
</head>
<body>
<img class="card-top" src="photo.jpg" alt="Card top image">
</body>
</html>Exercise: CSS Borders
Which property must be set for a border to actually appear, even if width and color are defined?
