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 can be used to create input text field in web page?
<form> <input> <div>
<input type="text" name="a_name" value="val" />
Which CSS property displays the text in a small-caps font?
display font-variant font-style
h3 {
  font-variant: small-caps;
What instruction displays a notice box with a message inside it, in JavaScript?
for() Date() alert()
var msg = "Visit";
Indicate the PHP code used to get the users IP.
echo $ip;
Circle and Oval with CSS

Last accessed pages

  1. Contact page - CoursesWeb (40190)
  2. Tabs effect with CSS (40802)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (47934)
  4. Fotorama Image Gallery (4017)
  5. Insert, Select and Update NULL value in MySQL (50168)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2970)
  2. Contact page - CoursesWeb (2862)
  3. Tabs effect with CSS (2844)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1039)
  5. PHP getElementById and getElementsByTagName (996)