HTML

The following CSS code enables rounded borders for elements like DIV, PRE etc. However it may not work in Internet Explorer (IE) as it is specific to certain browsers like Firefox.

pre {

-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

}

The above CSS defines 3px radius for the rounded element. You can change it to a value of your choice.

The unordered list “<ul>” supports an attribute named “type” that specifies type of display for bullets. The “type” attribute takes values: disc,circle,square.

The following displays a square instead of default disc style for bullets.

<ul type="square">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

display looks like following

• One
• Two
• Three

Similarly, a disc style appears as follows:

• One
• Two
• Three

Similarly, a circle style appears as follows:

• One
• Two
• Three

Otherwise, you can use “list-style-type” attribute in CSS as shown below:

ul {
  list-style-type: square;
}

You can customize the bullets further by specifying an image url in CSS as follows:

ul {
  list-style-type: url("/images/arrow.jpg");
}

The <li> tag can be used under an unordered list tag <ul> or ordered list tag <ol>.

The following shows how <li> tag can be used in an unordered list. Under unordered list, each <li> shows a bullet by default.

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

The above code appears in the browser as follows:

• One
• Two
• Three

You can use following CSS to disable left indentation:

ul {margin: 0;}

If you don’t want to display bullets, you can do the following.

ul {
 list-style-type: none;
 margin: 0;
}

You can use similar trick for ordered list

as well.