Question

I have this css code which I use for title background in JSF page.

.container{
    background: rgb(180,221,180); /* Old browsers */
    background: -moz-linear-gradient(45deg, rgba(180,221,180,1) 0%, rgba(95,163,9,1) 0%, rgba(95,163,9,1) 48%, rgba(0,87,0,1) 68%, rgba(0,0,0,1) 86%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(180,221,180,1)), color-stop(0%,rgba(95,163,9,1)), color-stop(48%,rgba(95,163,9,1)), color-stop(68%,rgba(0,87,0,1)), color-stop(86%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* IE10+ */
    background: linear-gradient(45deg, rgba(180,221,180,1) 0%,rgba(95,163,9,1) 0%,rgba(95,163,9,1) 48%,rgba(0,87,0,1) 68%,rgba(0,0,0,1) 86%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    /*
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5fa309), color-stop(1, #3b8018));
        background:-webkit-linear-gradient(top, #5fa309 0%, #3b8018 100%);
        background:-moz-linear-gradient(top, #5fa309 0%, #3b8018 100%);
        background:-o-linear-gradient(top, #5fa309 0%, #3b8018 100%);
        background:-ms-linear-gradient(top, #5fa309 0%, #3b8018 100%);
        background:linear-gradient(top, #5fa309 0%, #3b8018 100%);
    */
    position:relative;
    display:inline-block;
    padding:0 20px 0 10px;
    width:270px;
    line-height:20px;
    font-size:12px;
    font-family:sans-serif;
    text-shadow:0 1px 0 #264400;
    font-weight:bold;
    color:#fff
}

How I can make the edges of the figure more round?

Answer 1

.roundcorners {
  /* older webkit */
  -webkit-border-radius: 12px; 

  /* Older firefox */
  -moz-border-radius: 12px; 

  /* General support */
  border-radius: 12px; 
}

You can see the browser support on caniuse.com

the 12px is adjustable and will determine the radius of the borders.

As usual, much more detailed info in the MDN Documentation