How to Make Curved Corners in CSS

Cascading style sheets (CSS) lets you create aesthetic features and layouts for your Web pages. You can use CSS to round the edges on borders for tables, divs and other HTML container elements. You determine the radius for the rounded sections, and the Web browser displays the rounded corners without the use of extra images or coding.

Instructions

1. Right-click the HTML file that contains the elements you want to edit. Click "Open With," then click your HTML editor in the list of programs.

2. Create a "style" section in the HTML page. The following code denotes a CSS style section for the page:

   <script type="text/css"> </script>

3. Type the following code in the "script" tags created in step two:

   #div{

   border-radius: 20px;

   }

   The code above rounds a div container by 20 pixels.

4. Save the file and open the file in a Web browser. Review the rounded sections of your container to verify that you are satisfied with the new code.

References

• CSS Info: Border-radius: Create Rounded Corners with CSS!