CSS Rounded Borders

The border-radius property adds rounded corners to an element. A bigger value makes the corners rounder.

Example

A 5px border-radius rounds the corners of the bordered paragraph.

An HTML page that gives an element rounded corners.

In an internal `<style>` block, give a paragraph a 2px solid red border and a border-radius of 5px. Add a paragraph to show the rounded corners.

> Output: complete HTML page

Prompt

An HTML page that gives an element rounded corners. In an internal <style> block, give a paragraph a 2px solid red border and a border-radius of 5px. Add a paragraph to show the rounded corners.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  border: 2px solid red;
  border-radius: 5px;
}
</style>
</head>
<body>

<p>Round border</p>

</body>
</html>

All CSS Border Properties

A summary of the border properties:

border — all border properties in one declaration.
border-bottom, border-left, border-right, border-top — all properties for one side in one declaration.
border-color, border-style, border-width — color, style, and width of all four borders.
border-bottom-color, border-bottom-style, border-bottom-width — color, style, and width of the bottom border (and the same pattern for top, left, and right).
border-radius — sets the four corner radii for rounded corners.