How to Remove Moz- Border- Radius or Rounded Borders in Blogger

In  Blogger Template (especifically Picture Window) that  I am using, I meet a small  problem regarding on how to remove the moz-border-radius in my menu tabs  and the  surrounding corners of its body and footer area . But a big big thanks! to Google Chrome in his capability to let me see how  my design looks like by adjusting the settings live on screen without going to my Blogger template editor page  and to make the story short, I had succeeded in finding a solution of that problem. In this tutorial I will share you the steps on how to make it and the CSS is highly customizable according to your preferences.

removing moz-border-radius

INTO THIS

how to remove moz-border-radius


How to Remove Moz- Border- Radius in Menutabs, Body and Footer Section and Replace it with Straight Vertical Line


Step 1. Go to Blogger Dashboard
Step 2. Click Template
Step 3. Hit the Edit HTML button
Step 4. Look or find the code ]]></b:skin> and just before it paste the code below
.tabs-inner .widget li a {
-moz-border-radius:  0;
-webkit-border-top-left-radius:0;
-webkit-border-top-right-radius: 0;
border-radius: 0 0 0 0;
border-top-left-radius:0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0;
}
.tabs-inner .widget li:first-child a {
border-top-left-radius:0px;
}
.footer-outer{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.content-outer, .region-inner {
min-height:2px ;
margin: 0 auto ;
background-color:#FAFAFA;
border-top-left-radius:0;
border-top-right-radius:0;
}

Explanation:
  • The first set of code ( .tabs-inner .widget li a) is responsible for removing the  moz-border-radius of your menu-tabs (inner part).
  • The second set of code (.tabs-inner .widget li:first-child a ) is responsible in removing the moz-border-radius (border top left portion) in the first tab of your menu-tabs. In my case this the top left portion of my home tab.
  • The third part (.footer-outer )  works in removing those moz-border-radius in your footer area both in left and right portion of it.
  • And finally, the last part (.content-outer, .region-inner  ) removes those moz-border-radius above your content- outer region.
Customization (Optional):
1. Click here to change the hexadecimal color (FAFAFA)

Step 5. Click preview to see the initial effect of the codes
Step 6. Finally, Save your Template and you are done. Enjoy!
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook


Express yourself!
2 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV
  1. Howdy! This article could not be written any better!
    Looking at this article reminds me of my previous roommate!
    He constantly kept preaching about this. I'll send this post to him. Fairly certain he'll have a good read.

    Thanks for sharing!

    My website ... Buy LG 42LS5600 []

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...