Sponsored Links
There are many ways to make rounded corners. Most of them uses Javascript and CSS codes. And I believe most websites use images to make rounded corners. But I prefer rounder corners without using images simply because I don't have to worry about images. There are several tutorials I have found in the Internet on how to make rounded corners without images. But the problems are: it has bugs, the code is too long (messy) for just making rounded corners or it will not work on other browsers.
I stumbled across this forum, tested the code and it worked perfectly! But the code is very confusing! All you have to do is add one line of code in your wrappers! This is by far the simplest, easiest and coolest way to get rounded corners on your containers of almost any size or dimension (radius) without using a single image. The guys at Mozilla have provided us support for this CSS standard. The code is actually simple. Just define the amount of radius you want for a given corner of a container's style declaration.
This is a step by step tutorial on how to make rounded corners without images with using only one line of code.
1. Login to your Blogger account.
2. Backup you Template.
3. Lets say we make our header with rounded corners. So locate the code below:
#header
If you want to make your sidebar and main wrappers with rounded corners just locate the codes below:
#main-wrapper {
AND
#sidebar-wrapper {
4. Between the { and } (open and close brackets), put the code below:
-moz-border-radius: 15px 15px 15px 15px;
The parameters are upper-left, upper-right, lower-right and lower-left CORNERS.
5. View your blog and it should look something like the screen shot above.
This is by far the neatest code to make rounded corners. Only one line of code! But the big problem with this is browser compatibility issue. Opera, Internet Explorer (IE), and Google Chrome just ignore the code and renders normal square corners. This will only work with Firefox and Safari. Lets just hope that Opera, Internet Explorer (IE), Google Chrome and other browsers could catch up on this.
Reader Questions - Batch 11
12 years ago
9 comments:
How to put Navigation Tabs in Blogger using CSS Tab Designer
Top 10 Best-Clean-Professional-Looking Blogger Templates
How does one do this with images , like to make photos on blogger show up with rounded corners?
well the code is "-moz-border-radius: 15px 15px 15px 15px;" and i belive "moz" stands for mozilla firefox. It's a cool fast way to do rounded corners, but the browser compatibility bugs me! there are still lots of people usig IE or Opera. Although I love firefox,I use Chrome because it's working faster on my PC, and firefox keeps forgetting to "log me in automaticaly" and that is annoying. Chrome dosen't have that problem. If you only use firefox, this code is perfect. belive me, I was searching for a easier way, with less code, to create rounded corners. Thanks for your time.
I noticed your favicons don't show up.
I use Firefox, but I don't make my blog for me. Like you, I hope the other browsers catch up!
Man, this is awesome! I've been looking for this, and it was always about images, but this is so much easier!
Thanks :D
This doesn't work on my sidebar :(
Do I have to delete the sidebar background or something?
Thank you so much!! This worked perfectly on my main wrapper!
Post a Comment