Creating a nice rounded corner table

Question

I'm trying to make a html/css table to be reused for various vacancies we advertise.

It looks "ok" currently, but the site it is being hosted on does have rounded corners on images, dialogue boxes etc. How can I turn what I have into such a design?

From this:

To this mockup

The right space is for text people will paste in. Icing on the cake would be to have this somewhat responsive, so the white/grey area will wrap underneath the green on mobile devices.

This is what I currently have:

.tg {
  margin: 0px auto;
  width: 1000px;
}

.tg td {
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-xz1g {
  background-color: #003e2f;
  border: thin solid #ffffff;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
}

.tg .tg-0lax {
  text-align: left;
  vertical-align: top;
  border-bottom: medium solid #000000;
}

@media screen and (max-width: 767px) {
  .tg {
    width: auto !important;
  }
  .tg col {
    width: auto !important;
  }
  .tg-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: auto 0px;
  }
}

<div class="tg-wrap">&nbsp;
  <table width="728" class="tg">
    <tbody>
      <tr>
        <td width="290" class="tg-xz1g">Job Title</td>
        <td width="426" class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Name</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Org</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Vacancy Location</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Brief outline of position</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Application Closing Date</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g" colspan="2" style="text-align: center;">POC for further details</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Name</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Email</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Phone</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Attachments</td>
        <td class="tg-0lax">Attachment #1<br />
          <br /> Attachment #2</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

You need to add border-radius to have round corners and to see its effect use border or background-color property .

.tg {
  margin: 0px auto;
  width: 1000px;
}

.tg td {
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
  border: 1px solid black; /*Add this to your code*/
  border-radius: 5px; /*Add this to your code*/
  margin: 3px;/*According to need*/
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-xz1g {
  background-color: #003e2f;
  border: thin solid #ffffff;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
}

.tg .tg-0lax {
  text-align: left;
  vertical-align: top;
  border-bottom: medium solid #000000;
}

@media screen and (max-width: 767px) {
  .tg {
    width: auto !important;
  }
  .tg col {
    width: auto !important;
  }
  .tg-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: auto 0px;
  }
}

<div class="tg-wrap">&nbsp;
  <table width="728" class="tg">
    <tbody>
      <tr>
        <td width="290" class="tg-xz1g">Job Title</td>
        <td width="426" class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Name</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Org</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Vacancy Location</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Brief outline of position</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Application Closing Date</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g" colspan="2" style="text-align: center;">POC for further details</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Name</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Email</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Phone</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Attachments</td>
        <td class="tg-0lax">Attachment #1<br />
          <br /> Attachment #2</td>
      </tr>
    </tbody>
  </table>
</div>