How to Make Corners in CSS
CSS3, the latest standard for CSS, offers border properties that enable Web designers to create and style corners and outlines in various ways. You can control the thickness, angle, color and line style of each corner. Add rounded or angular corners to emphasize or bring attention to specific content.
Other People Are Reading
Instructions
-
-
1
Open the CSS file in an HTML editor or text editor. Locate the CSS selector that corresponds to the HTML element to which you want to add corners. For example, if you want to add corners to the <p> tag or paragraph, look for the "p" selector in the style sheet.
-
2
Type the "border" property and enter the values for the border type and thickness. You can choose from different types of border lines such as dashed or dotted, as well as varying degrees of outline thickness. To set the border to solid with a thickness of 1 pixel, for example, type the following:
p {
border: 1 px solid;
} -
-
3
Add the "border-radius" property and enter the desired value of the radius in CSS units, such as pixels. The lower the amount, the less curved are the edges. If you enter zero, or if you do not use this property at all, the corners will be angular. For compatibility with Firefox, add a second border-radius declaration prefixed with "-moz" as shown:
p {
border: 1px solid;
border-radius: 15px;
-moz-border-radius: 15px;
} -
4
Add the "padding" property to create a gap between the contents of the selector and the border. If you enter only one value for the padding, the space between the border and the contents will be equal on all sides. If you enter two values, the first value determines the spaces at the top and bottom, and the second value sets the spaces for the left and right sides. In the following example, the top and bottom of the paragraph have a 10-pixel gap between the border line and content; the left and right sides have a 35-pixel gap:
p {
border: 1px solid;
border-radius: 15px;
-moz-border-radius: 15px;
padding: 10px 30px;
} -
5
Type the "background" property and enter a color value such as "tan or "#cccccc" (without quotes). Use this if you want the paragraph or other item to have its own background color:
p {
border: 1px solid;
border-radius: 15px;
-moz-border-radius: 15px;
padding: 10px 30px;
background:#aacccc;
} -
6
Enter the "width" property and value if desired. In the example below, the width is set to 350 pixels:
p {
border: 1px solid;
border-radius: 15px;
-moz-border-radius: 15px;
padding: 10px 30px;
background: #aacccc;
width: 350px;
} -
7
Save the changes to the CSS file.
-
1
Tips & Warnings
You do not have to apply both a border line and a background. Either would make the corners visible so long as the border line or background color is different from the background color of the page.
You can set a different angle to each corner by using its own border radius property. These properties are "border-top-left-radius," "border-top-right-radius," "border-bottom-right-radius" and "border-bottom-left-radius."
