Rounded Corners
simple // ur most basic layout tutorials thread
Yayy! Okay so, in this chapter, we're going to
cover how to make the corners of your images or borders round.
I'm not going to tell you how to do it to a border because..
1. I haven't made a tutorial on that yet and I don't want to squish two into one.
and
2. Just apply what you learn today to the border. :D
OKAY I TOTALLY JUST LIED.
Rounded corners on images DO NOT WORK on AFF but if you do it on notepad and save it as a .html file,
you can see how it should/would look like if AFF allowed.
Regardless, I'm keeping the tutorial up. These tutorials don't ONLY have to apply to layouts on AFF right?
— The Codes
These are the codes that you're supposed to use to make your corners rounded. I even have it up in the first chapter.
border-top-right-radius: #px; -- this one rounds the top right corner.
border-top-left-radius: #px; -- this one rounds the top left corner.
border-bottom-right-radius: #px; -- this one rounds the bottom right corner.
border-bottom-left-radius: #px; -- this one rounds the bottom left corner.
— Tutorial
Alright. Now the official tutorial starts. So you already know how the code should look like, right? Usually, I place it right after the width or height in the code. And yes, you have to put in all four of the codes. If not, only the corners you put in will be rounded. Anyway, back to the code itself. For the '#' replace it with your own number. The larger the number gets, the rounder the corner will be. Let's start showing the examples now, shall we? You can go ahead and copy and paste the codes and use it as a base to test it out for yourself if you want but if you do, it's the same thing every time. Delete the spaces AFTER EVERY '<' and BEFORE EVERY '>' to get it to work properly. Once agian, THESE DO NOT WORK ON AFF but when you paste the code and look at it, that's how it should/would look like if AFF did allow it. You can paste them into notepad and save it as a .html file to see. That, for sure, will work.
Code: < img alt="" src="http://25.media.tumblr.com/tumblr_m6tzddlYWW1rzom0lo1_500.jpg" style="width: 313px; height: 200px; border-top-right-radius: 100px;" / >
Code: < img alt="" src="http://25.media.tumblr.com/tumblr_m6tzddlYWW1rzom0lo1_500.jpg" style="color: rgb(0, 0, 0); font-family: 'times new roman', times, serif; width: 313px; height: 200px; border-top-right-radius: 100px; border-bottom-right-radius: 100px;" / >
Code: < img alt="" src="http://25.media.tumblr.com/tumblr_m6tzddlYWW1rzom0lo1_500.jpg" style="width: 313px; height: 200px; border-top-left-radius: 100px; border-bottom-right-radius: 100px;" / >
Code: < img alt="" src="http://25.media.tumblr.com/tumblr_m6tzddlYWW1rzom0lo1_500.jpg" style="width: 313px; height: 200px; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 120px; border-bottom-right-radius: 120px;" / >
Code: < img alt="" src="http://25.media.tumblr.com/tumblr_m6tzddlYWW1rzom0lo1_500.jpg" style="width: 313px; height: 200px; border-bottom-right-radius: 100px;" / >
Resize it to your liking! Customize how round you want it to be to your liking! Just remember, the larger your number gets, the rounder the corner is. But you get it right? How to insert the code in, how it should look like. If so, then the next couple of examples are with borders.
Code: < img alt="" src="http://25.media.tumblr.com/tumblr_m6tzddlYWW1rzom0lo1_500.jpg" style="height: 200px; width: 313px; border-top-right-radius: 100px; border-width: 1px; border-style: dotted;" / >
Code: < img alt="" src="http://25.media.tumblr.com/tumblr_m6tzddlYWW1rzom0lo1_500.jpg" style="width: 313px; height: 200px; border-width: 5px; border-style: double; border-top-left-radius: 100px; border-bottom-right-radius: 100px;" / >
And there you have it! That, my friend, is how you round the corners of your image. Hope you guys enjoyed the tutorial! Also, start requesting because I'm running out of ideas of what to post in here.... :\ Well, what do we have after Rounded Corners? Spacing Between An Image And A Border. Ohh. Hehe, I bet you guys don't even know what I'm trying to say. Oh well. Until the next tutorial. :D
Comments