How to Create Boxes with Rounded Corners in CSS
See CSS: Tips and Tricks for similar articles.Prior to browser support for CSS3, creating boxes with rounded corners required the creative use of
background images, borders, and positioning. Thankfully, these days are gone. Today, browsers support
CSS3 and its border-radius
properties. The border-radius
properties makes
rounding the corners on a box easy.
- Start with an HTML page containing two boxes.
- The
border-radius
properties work by curving the corner according to a circle with its center offset from the corner of the box by the distance you specify. To create a simple box with rounded corners, add theborder-radius
property tobox1
.
The#box1 { background: #c00; border-radius: 25px; }
border-radius
property is a shorthand property that sets the radius for all four corners of the box to the same value when given only one value. - To change the roundness of the corners to different values, you can set more than one value, with the
values separated by spaces. The first value represets the top left corner, the second value represents the
top right corner, the third value represents the bottom right corner, and the fourth value represents the
bottom left corner. Add the following
border-radius
tobox2
.#box 2 { background: #ff0; border-radius: 10px 140px 30px 140px; }
- Open the HTML page in a browser. The two boxes should look like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../reset-meyer.css">
<style type="text/css">
body {
margin:10px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif
}
#box1, #box2{
width:200px;
height:200px;
margin:10px;
padding:10px;
}
#box1 {
background:#c00;
}
#box2 {
background:#ff0;
}
h2, p {
padding:5px;
}
#box1 p, #box2 p {
white-space:pre;
font-size:smaller;
font-family:monospace;
}
</style>
<title>Rounded Corner Boxes</title>
</head>
<body>
<div id="box1">
<h2>Example 1</h2>
</div>
<div id="box2">
<h2>Example 2</h2>
</div>
</body>
</html>
If you open this page in a browser, it looks like this:

Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS (this article)
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3