Circle and Oval with CSS

Css Course

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:

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/>https://CoursesWeb.net</div>

Demo:

<div>Web Programming and Development</div>

h2 {
  text-decoration: underline;
}

function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);

$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6