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


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

<div id="circle"><br/><br/>Web Programming Courses:<br/></div>

Web Programming Courses:

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;

<div id="oval"><br/>Courses for Web Development:<br/></div>

Courses for Web Development:

Daily Test with Code Example

Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
Circle and Oval with CSS

Last accessed pages

  1. JavaScript Course - Free lessons (13916)
  2. Bubble Tanks 3 (27446)
  3. Bubble Hit (2566)
  4. Skill Games (8396)
  5. Flash Games - Free online Games (22900)

Popular pages this month

  1. Qwop (2954)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2311)
  3. Get the value of the selected /checked checkboxes in a form (1463)
  4. Insert, Select and Update NULL value in MySQL (1300)
  5. Add, Change, and Remove Attributes with jQuery (1204)