How to add a Control-Button so that when you click on it, it insert a box with roundet corners!

[GoogleCodeExporter]

How can I add a new ControlButton, that inserts a html Code over the marked 
Text like this:

<div class="box">
    <span class="box-top-right"></span>

    <h2> Costum text</h2>
    <p> TextTextTextText </p>

    <span class="box-bottom-left"></span>
    <span class="box-bottom-right"></span>
</div>

CSS-style:
.box {
    color:#FFF;
    background:url(images/headerTopLeft.jpg) no-repeat;
    background-color:#f99e28;
    position:relative;
    padding:11px;
    width:97%;
    height:auto;
    margin-bottom:10px;
}
span.box-top-right {
    background:url(images/headerTopRight.jpg) no-repeat;
    top: 0; 
    right: 0; 
    position: absolute; 
    width: 11px; 
    height: 11px; 
    display: block;
}
span.box-bottom-left { 
    background:url(images/headerBottomLeft.jpg) no-repeat;
     bottom: 0; 
    left: 0; 
    position: absolute; 
    width: 11px; 
    height: 11px; 
    display: block; 
}
span.box-bottom-right {
    background:url(images/headerBottomRight.jpg) no-repeat;
    bottom: 0; 
    right: 0; 
    position: absolute; 
    width: 11px; 
    height: 11px; 
    display: block; 
}

Original issue reported on code.google.com by benecrac...@googlemail.com on 1 Apr 2011 at 10:09