Preserve the color of bootstrap button and add background

[Jack_Tauson_Sr]

I’ve a button showing like this:

Code for the button is below:

<div class="dropdown ">
     <button class="btn btn-primary dropdown-toggle " type="button"  data-toggle="dropdown">Drop Down List Button<span class="caret"></span></button>
  <ul class="dropdown-menu " id = "set" >
 </ul></div>

When I added the following css

#rcorners {
  border-radius: 25px;
  /* background: url(paper.gif); */
  background: grey;
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 300px;
  height: 50px;
}

It started showing like this :

1. I want to preserve the color of the button and then display the background with grey color outside of that button area. How can I do that?

2. I am populating the list items in ul tag dynamically using Javascript but the text is going outside the border. How can i restrict the length to the size of button or border maybe and also make sure that full text is visible? Thanks