Rounded Containers (CSS3)

2 posts Page 1 of 1
Was this helpful/useful?

100%
Yes
1
No votes
No

Total votes: 1

Contributors
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

Rounded Containers (CSS3)
smashapps
Hello,

Just a quick tutorial on "border-radius"

Border-radius is new and is used in CSS3 to make ugly rectangle boxes rounded!

There is a lot you can do with it but I'll show you the basics of it and how you can use it.

You will need two files, your index.html and style.css (you can name these whatever you like.)

In the index.html file add this code:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Rounded Rectangles</title>
</head>
<body>
<div id="rounded">
I am rounded. My font is Calibri and I am white text and my background is dark grey.
</div>
</body>
</html>
Let's explain this. The doctype is telling the browser this is a HTML5 file. We set the charset to utf-8, that's just text enconding. link tag is for the css file. The div tag is calling the id "rounded" if you look in the css code below you see #rounded, so everything in #rounded will be applied to our div.

In the css file add this:
Code: Select all
#rounded 
	{
	border-radius:5px;
	width:180px;
	background-color:#666666;
	color:#FFFFFF;
	font-size:16px;
	font-family:Calibri;
	text-align:center;
	}
border-radius is the radius of the border. Nothing else to it. the 5px; is the size of the radius, how round the edges are. If you want custom radius you can use:
Code: Select all
border-radius: 0px 0px 0px 0px;
which is top-left, top-right, bottom-left and bottom-right.

Above we set the width of the div to 180pixels wide, background colour to dark grey, the text color to white, font size of the text, the font of the text and we align the text left. Note you can't use "align" it is usually "text-align" etc.

Result:

Image

Not sure if I worded my small tutorial very well but if you need any help feel free to ask, I hope you liked it.
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Re: Rounded Containers (CSS3)
Danny
define webkit and moz too:
Code: Select all
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
2 posts Page 1 of 1
Return to “Tutorials”