Circle and Oval shapes created with a single HTML DIV tag and a few CSS properties.

Circle

<style type="text/css">
#circle {
 width: 180px;
 height: 180px;
 background: #abcdef;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 padding:15px;
}
</style>

<div id="circle"><br/><br/>Web Programming Courses:<br/>CoursesWeb.net</div>
Demo:


Web Programming Courses:
CoursesWeb.net

Oval shape

- Radius must be half of length and width, to which is added the padding value (in this example: (240 / 2) + 15 = 135, and (120 / 2) + 15 = 75).
<style type="text/css">
#oval {
 width: 240px;
 height: 120px;
 background: #89f899;
 -moz-border-radius: 135px / 75px;
 -webkit-border-radius: 135px / 75px;
 border-radius: 135px / 75px;padding:15px;
}
</style>

<div id="oval"><br/>Courses for Web Development:<br/>http://CoursesWeb.net</div>
Demo:

Courses for Web Development:
http://CoursesWeb.net

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Circle and Oval with CSS

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (53270)
  2. Qwop (22515)
  3. Mahjong Gardens (4846)
  4. Bubble Hit (1523)
  5. Dog Mahjong (4116)

Popular pages this month

  1. Bubbles3 (3702)
  2. Butterfly Kyodai (2804)
  3. Zuma Deluxe (2375)
  4. Backgammon (1425)
  5. Qwop (1374)