title: CSS - ExtJS 4 - Styling the Grid Panel Column Header
body: <p>Good day. I am developing a web application. I have a form where I have a Grid Panel. I want the Grid Panel to have a border around it and in between the columns. I've achieved this for the Grid View, however, I am struggling to put borders on the column headers. Here is how my Grid Panel looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/QU570.png" alt="Grid Panel"></p>
  
  <p>As you can see, the Grid View (the one below the column headers) have borders around them, while the Column Headers do not. Here is the CSS Resource that I used:</p>
  
  <pre><code>.child-row .x-grid-cell{
      font-size: 17px; 
      font-weight: bold; 
      font-style: italic; 
      font-family: 'Times New Roman';
  
      border-bottom-color: #000000; 
      border-bottom-style: solid; 
      border-top-color: #000000; 
      border-top-style: solid; 
      border-right-color: #000000; 
      border-right-style: solid; 
      border-left-color: #000000; 
      border-left-style: solid; 
  
      line-height: 17px;
      height: 100px;
      padding: 0px;
      margin: 0px;
      vertical-align: middle;
  } 
  
  .child-row .x-grid-cell-inner{
      text-align:center !important;
      white-space: normal !important;
  }
  </code></pre>
  
  <p>And thus far, it's worked well for styling the grid cells. I used this in my gridView as such:</p>
  
  <pre><code>viewConfig: {
      getRowClass: function(record, rowIndex, rowParams, store) {
          return 'child-row';
      },
      itemId: 'pfReceiptGrid',
      style: 'border: solid Black 1px'
  },
  </code></pre>
  
  <p>I need to put the border code in there because otherwise, only the inside of the columns will have borders between them. </p>
  
  <p>Can anyone help me with this? I'm not good with CSS and I'm a newbie in ExtJS 4. I've been stuck here for quite some time trying various <code>.x-grid-</code> code in hopes of making something work but to no avail. Thank you in advance for the help. </p>