Home/ Questions/Q 276699
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T00:57:45+00:00

I would like to style a <ul> to display all items in a box

  • 0

I would like to style a <ul> to display all items in a box with rounded corners (see below):

enter image description here

Is it possible to use CSS and only the <ul> (with no additional <div>s and tables), as I’m going to use it in a CMS system to style all <ul>s created by the user?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I was able to recreate your image using the following (X)HTML and CSS:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>UL Corners</title>
        <style type="text/css">
            ul {
                background-color: #EBEBEB;
                list-style-image: url(arrow.png);
                font-family: Verdana, Helvetica, sans-serif;
                font-size: 11px;
                padding: 15px;
                width: 410px;
                border-radius: 20px;
                -moz-border-radius: 20px;
                -webkit-border-radius: 20px;
            }
            li {
                margin: 10px;
                margin-left: 25px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                Functional DR (Disaster Recovery)
            </li>
            <li>
                Virtual off site contact centre management
            </li>
            <li>
                Technology, Connectivity, Process and Resource Management in disaster recovery site
            </li>
            <li>
                Mission Critical Response Service Level Agreements and Logistical management
            </li>
        </ul>
    </body>
  </html>

    The end result looks like this:

    screenshot http://img19.imageshack.us/img19/2194/screenshotdzn.png

    But it only works in Firefox, Chrome, Safari and any browser supporting CSS3. That sadly excludes IE.

    • 0