How to Give Your Blogger Template Rounded Corners

• Adding css is really easy with the new Template Designer. Simply click on the design tab in you Blogger admin, next go to the Template Designer, once it loads click on the Advanced tab, and at the bottom of the element list you will find the "Add CSS" option.

  The code below will add roundedness to the main container.
  div.content-inner {
  -moz-border-radius: 10px; /*Firefox*/
  -webkit-border-radius: 10px; /*Safari & Chrome*/
  -khtml-border-radius: 10px;
  border-radius: 10px; /*Standard CSS3 declarations & IE9*/
  }
  The class content-inner is how we target the container div and the three declarations will cover all the major browsers as noted in the css comments.
  This will create symmetric rounded corners, however if you would like to define each corner individually the standard css parameter short hand structure applies and the other possible options are:
  border-radius: TOP-LEFT TOP-RIGHT BOTTOM-RIGHT BOTTOM-LEFT;
  If you would like to know more about available rounded corners and borders, as well as browser compatibility for each case there is a good summary here.
  Following the code above you can now also round the header's corners:
  div.header-outer {
  -moz-border-radius: 10px; /*Firefox*/
  -webkit-border-radius: 10px; /*Safari & Chrome*/
  -khtml-border-radius: 10px;
  border-radius: 10px; /*Standard CSS3 declarations & IE9*/
  }
• 

  Before and After Screenshots

   

   

  

• Dealing With Old Browsers

  Now for the tricky part. As mentioned before using CSS3 has the unfortunate downside of not being supported by older browsers (mostly Internet Explorer, all the way up till version 8). Now there are two choices - either provide a fall-back solution or accept the fact that the page will look different in less capable browsers.
  For quite a while now there has been a growing trend to actually do the latter. Just like we provide progressive enhancement for JavaScript functionality, same approach can be taken with CSS. Rather than create a pixel perfect, lowest denominator design across all browsers, we us the optimal way for achieving the desired effect, and allow he design to degrade gracefully to a simpler version.
  Alternatively if you would like to dazzle your old-browser-fashioned audience you can use JavaScript and/or extra markup and images that would work everywhere. You could try using Curvy Corners or Spiffy Corners.

Random Posts...!!!

Posted in: blogger,Corners,Rounded,Template

If You Enjoyed This Post Please Take 5 Seconds To Share It!