How to Apply a Border-radius in CSS
Before level three of Cascading Style Sheets (CSS) came out and gained support from browsers, rounded corners on Web pages required tricky techniques using cut-up images. With the addition of the "border-radius" CSS3 property, you can now make rounded corners using only a line or two of code and no images. You can even give each corner of an HTML element a different border radius. The "border-radius" property works well on <div> tags, buttons, and form fields. Unfortunately, it does not work in older versions of Internet Explorer.
Other People Are Reading
Instructions
-
-
1
Open the HTML file of your Web page in a code editor such as jEdit, Notepad++ or BBEdit. Locate the HTML element where you want to apply the border radius by finding its corresponding tag. For example, the tag for a paragraph element is <p>. Look at the attributes inside the tag and find either a class name or ID name. If you see neither of these attributes, add one like so:
<div id="idname" class="classname">Contents...</div>
Note that you can re-use class names in multiple tags, but you can only use one ID name for each tag on a Web page.
-
2
Scroll to the top of your HTML file and add <style> tags between the <head> tags. Set the "type" attribute to "text/css" if you use HTML 4 or XHTML code. You can also add it if you are unsure which standard of HTML you are using. If your website uses an external style sheet, add the CSS code there instead.
-
-
3
Write a selector to "select" your HTML element in CSS. Prefix class names with periods and prefix ID names with hash symbols. Select by tag name to select all tags of a specific type on the page. Here are examples of how you can select HTML elements:
div {}
#idname {}
.classname {}
-
4
Set the "border-radius" property for your selected HTML element. Here is an example:
#idname {border-radius: 10px;}
In the above code, the HTML element gets rounded edges with a radius of ten pixels each. You can use "border-top-left-radius" to apply a rounded edge to the top-left corner of an element, or round only the bottom edges using "border-left-bottom-radius" along with "border-bottom-right-radius."
-
5
Duplicate your "border-radius" properties and then add the "-webkit" vendor prefix in front of them. The result will look like this:
border-radius: 10px;
-webkit-border-radius: 10px;
Duplicate the original properties again, but add the "-moz" prefix this time. Wherever you used a property such as "border-top-right-radius," change the Mozilla-prefixed property to something like "-moz-border-radius-topright." Note that this code supports Firefox versions 3.x, but Firefox 4 and up just uses "border-radius."
-
1
Tips & Warnings
Allow non-compatible browsers to display sharp corners. This practice is known as "progressive enhancement," and it does not effect the overall performance or usability of a website design. Use JavaScript fall-backs to round corners in older browsers if you still want the rounded corners in all browsers.
Internet Explorer 8 and below are not compatible with the "border-radius" property.
Always back up your HTML and CSS files before editing them.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
