Add a outer box inside the table just like experts-exchange

I want to add a outbox inside the table. I know the both corner are the image files, but i dont know i to do it just look like expert-exchagne here.

  ~-----------------------------------------~
  | My text here                                 |
  |  * 1.                                            |
  |  * 2.                                            |
  |                                                    |
  ~-----------------------------------------~

LeanMoreTryMoreAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
gops1Connect With a Mentor Commented:


And to change the height and width use the first DIV tag:

<div class="rounded-box" style="background-color: #cddef0; width: 98%; height: 300px;font-family:verdana;font-size:10px;">


Use this:

<html>
      <head>
            <title>Script Demo</title>
          <style>
               div.rounded-box {
               position:relative;
               margin: 5px;
               }
               div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
               {position:absolute; width:20px; height:20px; background-color:#ffffff; overflow:hidden;}
               div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; line-height:42px;}
               div.top-left-corner { top:0px; left:0px;}
               div.bottom-left-corner {bottom:0px; left:0px}
               div.top-right-corner {top:0px; right:0px}
               div.bottom-right-corner {bottom: 0px; right:0px}
               div.top-left-inside {left:-8px;}
               div.bottom-left-inside {left:-8px; top:-18px;}
               div.top-right-inside {left:-26px;}
               div.bottom-right-inside {left:-26px; top:-18px;}
               div.box-contents {
               position: relative; padding: 8px; color:#000;
               }
          </style>

      </head>

<body>
      <div class="rounded-box" style="background-color: #cddef0; width: 98%; height: 300px;font-family:verdana;font-size:10px;">
            <div class="top-left-corner">
                  <div class="top-left-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="bottom-left-corner">
                  <div class="bottom-left-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="top-right-corner">
                  <div class="top-right-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="bottom-right-corner">
                  <div class="bottom-right-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="box-contents">
            - Place your content here -
            <ol style="margin-top:2px;">
                  <li>Point 1</li>
                  <li>Point 2</li>
            </ol>
            </div>
</body>
</html>

0
 
gamebitsCommented:
A very simple way to do something similar is by using fieldset <fieldset>text text text text </fieldset>

Gamebits
0
 
gops1Commented:
Have a look at this:

<html>
      <head>
            <title>Script Demo</title>
          <style>
               div.rounded-box {
               position:relative;
               margin: 5px;
               }
               div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
               {position:absolute; width:20px; height:20px; background-color:#ffffff; overflow:hidden;}
               div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; line-height: 40px;}
               div.top-left-corner { top:0px; left:0px;}
               div.bottom-left-corner {bottom:0px; left:0px}
               div.top-right-corner {top:0px; right:0px}
               div.bottom-right-corner {bottom: 0px; right:0px}
               div.top-left-inside {left:-8px;}
               div.bottom-left-inside {left:-8px; top:-17px;}
               div.top-right-inside {left:-25px;}
               div.bottom-right-inside {left:-25px; top:-17px;}
               div.box-contents {
               position: relative; padding: 8px; color:#000;
               }
          </style>

      </head>

<body>
      <div class="rounded-box" style="background-color: #cddef0; width: 200px; height: 9em;font-family:verdana;font-size:10px;">
            <div class="top-left-corner">
                  <div class="top-left-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="bottom-left-corner">
                  <div class="bottom-left-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="top-right-corner">
                  <div class="top-right-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="bottom-right-corner">
                  <div class="bottom-right-inside" style="color:#cddef0;">&bull;</div>
            </div>
            <div class="box-contents">
            - Place your content here -
            <ol style="margin-top:2px;">
                  <li>Point 1</li>
                  <li>Point 2</li>
            </ol>
            </div>
</body>
</html>
0
 
LeanMoreTryMoreAuthor Commented:
Thanks qops

  <style>
               div.rounded-box {
               position:relative;
               margin: 5px;
               }
               div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
               {position:absolute; width:20px; height:20px; background-color:#ffffff; overflow:hidden;}
               div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; line-height: 40px;}
               div.top-left-corner { top:0px; left:0px;}
               div.bottom-left-corner {bottom:0px; left:0px}
               div.top-right-corner {top:0px; right:0px}
               div.bottom-right-corner {bottom: 0px; right:0px}
               div.top-left-inside {left:-8px;}
               div.bottom-left-inside {left:-8px; top:-17px;}
               div.top-right-inside {left:-25px;}
               div.bottom-right-inside {left:-25px; top:-17px;}
               div.box-contents {
               position: relative; padding: 8px; color:#000;
               }
          </style>

===
How do i increase the width / height of the inside box?
I try to increase the size of the
position:absolute; width:20px; height:20px; background-color:#ffffff; overflow:hidden;

but it turns up very messy
0
 
LeanMoreTryMoreAuthor Commented:
just last question.
Why i always found there are corner image used to drawing the outerbox
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.