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

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

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
Circle and Oval with CSS

Last accessed pages

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (56113)
  2. jQuery Drag and Drop Rows between two similar Tables (9251)
  3. Volume and Surface Area Calculator for 3D objects (8906)
  4. Ajax-PHP Rating Stars Script (14701)
  5. For loops in ActionScript (2076)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (281)
  2. Register and show online users and visitors (176)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (155)
  4. Read Excel file data in PHP - PhpExcelReader (155)
  5. JavaScript Course - Free lessons (128)