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

Like this story? Give it an Upvote!
Thank you!

Comments

You must be logged in to comment
starfan24
#1
Chapter 13: ⋆。°✩Reader Comment⋆。°✩

Hi author -esque!!

Love this tutorial!! Thank you so much!!

Reader
⋆。°✩starfan24⋆。°✩
Krystal_Luu
#2
Thank you for creating this!!!!
godna24
#3
Chapter 38: hi erm i wanna ask is it possible to use background image instead of background color in the scroll box?
Mael517 #4
Chapter 32: Thank you; this was very helpful!
sikakira
#5
Chapter 18: I wish text shadow worked :((((
Sakarafreak
#6
Chapter 7: Im still confused on the strikethrough..
Dark_History45 #7
Chapter 23: how to change the background image?
Jisoori #8
Chapter 8: why do i have this 'lorem ipsum dolor sit amet' on my preview?