How Rounded Corners Work in CSS

by | Dec 12, 2013 | CSS, Web Design

Rounded Corners in CSS

Boring square boxes can really be a drag. In the early days of html, that was the only way to show your content, unless you slices up images and put them in tables (*gasp!). Css came along, and we were overjoyed at the capability to layout content without slicing images, but we still had to if we wanted rounded corners or anything other than a square box. Then, CSS evolved and we finally gained control over the shape of our corners, which was liberating. Some are intimidated by creating rounded corners at first, but once you do it a time or two, you tend to get the hang of it. This week, I am going to show you how rounded corners work in CSS.

We’ll begin by building on the html from last week’s css session, where you learned how to apply text shadows.



<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="main">
<h1>Create Text-Shadows</h1>
<h2>Using CSS Styles</h2>
</div>

</body>
</html>


The CSS


#main{
border-radius: 10px;
background:#AAA;
}


The results:


Rounded Corners Box


The pixel amount is how you control how round the corners are. The higher the pixel value is, the rounder the corners will be. When you lower the value, the corners will appear to be more square. You can also use “em” values as well. If you incread the value high enough, the rounded edges will meet, creating a pill shape. If the box model you are applying it to is square, then you will create a circle via CSS.


Rounded Corners Pill


 


Notice how the text runs out of the bounds of the rounded corners on both.


 


Rounded Corners


You can create a different roundness value for each corner, enabling you to create some interesting shapes in CSS. All you have to do is specify the direction of the corner via css. You can see this via the example CSS below.


The CSS


border-top-left-radius: 2em;
border-top-right-radius: 1em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 1em;
background:#AAA;


The Result:


Screen Shot 2013-12-11 at 7.45.48 PM


Conclusion


Creating rounded corners in CS isn’t difficult. You just have to determine how round you want them via pixels or em. You also have to determine whether you want them all to be rounded the same or if you want each one of them to be different. As always, try this out for yourself, and if you run into any problems, leave your questions or comments in the comments section below.