The ability to give elements rounded corners is new with the new version of CSS, CSS3. Previously, rounded corners could only be achieved by making images for each corner and positioning them accordingly. Now we can quickly and easily do it with CSS using border-radius! Subeta has gotten a little rounded corner heavy – if that’s not your thing, I’ll give you the code to straighten those edges back out.

Remove Rounded Corners

To remove the rounded corners from elements, add the following to the CSS selector:

-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;

Yes, you need all three versions, though they all achieve the same thing. Since CSS3 is brand new, it hasn’t become the commonly used web standard, so different internet browsers implement it a bit differently. -moz-border-radius is needed to work on Firefox, while the other two (-webkit-border-radius and border-radius) work on the other browsers (Safari, Chrome, Internet Explorer, etc).

For example, to remove the rounded corners from all of the textareas, buttons, and form elements (like the Shop Search), you would use this code:

input, textarea, select {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}

Add Rounded Corners

Of course, if you love rounded corners, you can also add them to most elements. Instead of giving the element a border-radius of 0px, just give it a pixel value.

input, textarea, select {
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}

You can even give elements a circle shape using the same code! The element must start out being a square: a rectangle won’t turn into a perfect circle. Then, just make the border-radius value half of the width/height of the element to make it a circle. So if you have a div that is 250 pixels wide and 250 pixels high, giving it a border-radius of 125 pixels will make it look like a circle.

Want to make the HA headshots from the Friends section on your profile into little circles? Use this code:

.avatar_head {
width: 30px;
height: 30px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

Whee!

Have any questions or comments? Feel free to comment on this post!