Guaranteed Rounded Corners with CSS3

Guaranteed Rounded Corners with CSS3

Are you finding it difficult to give some elements of your website that little something extra? Is your page a bit to sharp and unwelcoming?

An excellent way of changing it up is the use of rounded corners. Web designers/ developers looking for inspiration have surely come across a multitude of websites that utilize this property to great effect.

Here I’ll be showing you in it’s simplest form how to achieve rounded corners in CSS3.

CSS3 has been progressing in leaps and bounds in recent years. Web designers and developers alike are pushing the boundaries of what this language can do in terms of website design; be it interaction, animation, or just aesthetics. Whats more, with the advent of CSS pre-processors like Sass and LESS there is no limit to the amount of complex features you can create for your web projects. Going back to basics, one extremely effective property used in CSS3 is the border-radius property which allows you to give the effect of rounded corners.

When using this property it is important to understand which versions of which browsers it is compatible with. For a frame of reference W3Schools provides a simple table with this information: Take Me To W3Schools.

The Result:

Look at these rounded corners!

 

The Process:

  • We will start by creating a simple div which has the class roundedCorners and placing a piece of text inside the div just to give you the full effect. Here is the code below:

    html code for rounded corners
    
  • Next we add the class roundedCorners to our stylesheet. Code is below

    .roundedCorners{
         width: 50%;
         background: #fff;
         border: 3px solid #fe1d88;
         -webkit-border-radius: 15px;
         -moz-border-radius: 15px;
         border-radius:  15px;
         padding: 0.5em;
    }
    

    The two properties that are important here are border and border-radius. In order to create a border with a rounded corner, a border of a particular size and colour must be defined. As defined here the border radius is of a uniform 15 pixels meaning that all sides are rounded to 15 pixels. A higher number will increase the curve whereas a lower pixel value will decrease the curve.

    You may be wondering what -webkit and -moz are doing in there. To ensure that this property is compatible with the widest range of browsers we include both the webkit and moz properties. With this done each web browser will detect its appropriate property and interpret it to create the rounded corners.

The Code

See the Pen tilHd by Michelle (@michellemcc76) on CodePen.

What’s Next?

What now you ask? Well now that you know the principal behind the border-radius property you can cheat. That’s right there are already CSS3 border radius generators out there to do the grunt work for you. Well that would have made this article a great deal shorter if I just gave you links to these websites(which I do provide at the end before you leave in a fit of rage), but as with anything you do it is important to understand HOW something works before you can properly use it.

Useful Links

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>