280 Million Impression / Month

FeedWind is an RSS feed widget. Simply copy & paste the snippet of code to embed into your web page. It's free and ready to use without having to register!

Radiusing Corners with Custom CSS

Making a rounded corner in CSS is an elegant way to improve the looks of a site by matching the design principles of the elements, such as the FeedWind widget, to theme elements or the template in use. Firstly it is helpful to know some information about the elements you are trying to match. If this is not a design aim, then just experimenting with different radius values is a good way to go. Once you are familiar with the settings you can apply them to the custom CSS that will allow you to integrate FeedWind to make it fit seamlessly into your site.

Create a Custom CSS for FeedWind

First you need to create a custom CSS file (see our custom CSS tutorial here) using your favorite editor such and create a structure to match FeedWind’s HTML The custom CSS code should look something like this: We have added a basic border command which sets a radius of 10 pixels on all borders.RSS widget preview

/*##########Container##########*/
# container{margin:0; padding:0; width:200px; height:300px; font-size:12px;font-color:#FFFFFF;
border-radius:10px 10px 10px 10px; background-color:#9AB1D2;}
/*##########Header##########*/
# header{width:200px;height:10px;margin:10px 0px 10px 0;padding:10px 5px 10px 5px;font-color:#FFFFFF;}
# header.feed_title{margin:10px 0px 50px 0;padding:10px 5px 50px 5px;;font-weight:bold;}
# header.feed_title a:link{color:#FFFFFF;text-decoration:none;}
# header.feed_title a:visited{color:#FFFFFF;text-decoration:none;}
# header.feed_title a:hover{color:#FFFFFF;text-decoration:underline;}
# header.feed_title a:active{color:#FFFFFF;text-decoration:none;}
/*##########Content##########*/
# content{margin:0;padding:5px 5px 10px 10px;}
# content.feed_item{margin:10px 0 10px 0px;padding:0 0 0px 0px;}
# content.feed_item_title{margin:1px 20px 1px 3px;padding:1px 0 1px 3px;color:#FFFFFF;font-weight:bold;}
# content.feed_item_title a:link{color:#FFFFFF;text-decoration:none;}/*feed_item_title:link*/
# content.feed_item_title a:visited{color:#FFFFFF;text-decoration:none;}/*feed_item_title:visited*/
# content.feed_item_title a:hover{color:#FFFFFF;text-decoration:underline;}/*feed_item_title:hover*/ 
# content.feed_item_title a:active{color:#FFFFFF;text-decoration:none;}/*feed_item_title:active*/
# content.feed_item_description{margin:0 0 0 3px;padding:0 0 0 3px;color:#FFFFFF;line-height:135%;}/*feed_item_description:active*/

For border radiusing the Syntax is as follows:

cmd: [ | ]{1,4} [ / [  |  ]{1,4} ]

Simple example

RSS widget corner radiusThis is for a simple radius that is even in both x and y dimensions.

border-radius: 20px 20px 125px 125px;

This will set each border radius to 20 pixels as in the top left and right corners of the example image. If you set a radius larger than 50% of any of the dimensions of the container then the maximum radius will be the default. This means that for a container 100px wide, any radiuses used over 50px will be defaulted back to a maximum equivalent to the width of the container. 

The image example shows a bottom border radius set to 150px – the container width is only 200px which puts the radius beyond that allowable for the simple border-radius command so the maximum radius is used forming a circular shape. 

Browser Support for Corner Radius Commands

Browser support for these radius commands is varied; Chrome, Safari and Opera have no problems with the –webkit prefix for previous versions but not necessary above V5. Firefox requires the –moz prefix adding and only Internet Explorer V9 is able to deal with radius in CSS. 

Firefox radiused corners

The following code is improved slightly to take account of Firefox and enable support. The –moz-border-radius command has the same effect in Firefox as the border-radius command. 

-moz-border-radius: 10px;

border-radius: 10px;


Defining complex radiused corners using CSS

The border-radius command covers more than simple radius measurements in pixels. Defining an off-center radius allows for dual corner radius profiles and radius centers outside the container. These are the available radius commands: Where R1 and R2 are the radius measurements in pixels. ems or %. If no measurement type is put in, the command assumes pixels to be the chosen units. A zero value anywhere returns a square corner.

border-bottom-left-radius: R1 R2;

border-bottom-right-radius: R1 R2;

border-top-left-radius: R1 R2;

border-top-right-radius: R1 R2;

These are all varying ways to apply a radiused corner giving these results and can be expressed as a pixel length or as a percentage, for example:

border-top-left-radius: 50px; border-top-left-radius: 50px 50px; border-bottom-right-radius: 8% 4%; border-top-right-radius: 6px;

This diagram shows the possibilities:

RSS widget container corner radius types

In most cases the user will want to determine the radius of all corners simultaneously so this property can take one or two value sets, each containing one-four dimensions in pixels or percentages. Where only a single value set is present, the horizontal/vertical settings will be matched. However the parameters and the use of the broader range of border radius commands allow significant flexibility when it comes to design.

 

 


How to achieve some common shapes

radius types for corners in RSS feed widget

The code below will produce the corner effects as in the diagram above where CornerboxA is the code for the shape ‘A’ above, CornerB for B etc. Note that the –moz version of the radius commands have a slightly different label; however the parameters are the same in both cases.

 

 

#cornerboxA {height: 65px; width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
# cornerboxB{height: 65px;width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
# cornerboxC{height: 65px;width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
# cornerboxD{height: 5em;width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
# cornerboxE{height: 65px;width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
# cornerboxF{height: 70px;width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}


Some examples of complex radius

container radiused corner RSS feed widget

The “border–radius” command in line 2 of our original example can use a variety of settings. This code:

border-radius: 5px 20px 200px 20px

adds simple radiusing and displays this shape>>

To get a broader curve, the code could contain:

border-bottom-right-radius:50px 200px

This ignores the other corners and needs

border-top-left-radius: 15px;

border-top-right-radius: 15px;

border-bottom-left-radius: 15px;

corner radius in rss widget

added to display this shape>>

To achieve the rounded corner effect when using the extended radius commands, standard border-radius commands will be ignored so to achieve a combination of different radiuses, the more complex radius command set MUST be used and applied to each corner. The example might be used where a page flip link is placed at the bottom right hand corner which might open a new page with full RSS newsreader. The whole definition for radiusing these corners would be:

1.border-top-left-radius: 15px; 2.border-top-right-radius: 15px; 3.border-bottom-left-radius: 15px; 4.border-bottom-right-radius: 50px 200px;

You will see that in line 4, there are two dimensions. This allows for very accurate radius control with the ability to specify dual radius points for each single corner.

Conclusion

A little tinkering about with your radius settings can make a real difference when integrating FeedWind into a site. Creating a custom CSS is not overly complex and can open the door for many other customizations of your FeedWind widget. There is ample opportunity to use radiused shapes to add more interesting looks and ergonomics to your site. It’s pretty easy to get these changes in place too, so give them a try and customize your RSS widget output!


 

 

 

 

Posted by Tim Higgins
rss widget, radius corner widget, feedwind rss widget, customize feedwind, custom widget,

Back to Top