Rounded Containers (CSS3)
2 posts
Page 1 of 1
Quick Profile
Information
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am View Full Profile
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:
In the css file add this:
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:
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.
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
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. <!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>
In the css file add this:
Code: Select all
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:#rounded
{
border-radius:5px;
width:180px;
background-color:#666666;
color:#FFFFFF;
font-size:16px;
font-family:Calibri;
text-align:center;
}
Code: Select all
which is top-left, top-right, bottom-left and bottom-right. border-radius: 0px 0px 0px 0px;
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:
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!
Quick Profile
Information
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm View Full Profile
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
Copyright Information
Copyright © Codenstuff.com 2020 - 2023