title: Border styles in p:panelGrid
body: <p>I'm trying to apply a dotted border to PF 5.0 <a href="http://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml" rel="nofollow noreferrer"><code>&lt;p:panelGrid&gt;</code></a> as follows.</p>
  
  <pre><code>&lt;p:panelGrid styleClass="panelgrid-dotted-border"&gt;
      &lt;f:facet name="header"&gt;
          &lt;p:row&gt;
              &lt;p:column colspan="2"&gt;
                  &lt;h:outputText value="Shipping Address"/&gt;
              &lt;/p:column&gt;
          &lt;/p:row&gt;
      &lt;/f:facet&gt;
  
      &lt;p:row&gt;
          &lt;p:column style="width: 200px;"&gt;
              &lt;p:outputLabel for="firstName" value="First Name" style="font-weight: bold;"/&gt;
          &lt;/p:column&gt;
  
          &lt;p:column style="width: 200px;"&gt;
              &lt;h:outputText id="firstName" value="First Name"/&gt;
          &lt;/p:column&gt;
      &lt;/p:row&gt;
  
      &lt;p:row&gt;
          &lt;p:column&gt;
              &lt;p:outputLabel for="middleName" value="Middle Name" style="font-weight: bold;"/&gt;
          &lt;/p:column&gt;
  
          &lt;p:column&gt;
              &lt;h:outputText id="middleName" value="Middle Name"/&gt;
          &lt;/p:column&gt;
      &lt;/p:row&gt;
  
      &lt;p:row&gt;
          &lt;p:column&gt;
              &lt;p:outputLabel for="lastName" value="Last Name" style="font-weight: bold;"/&gt;
          &lt;/p:column&gt;
  
          &lt;p:column&gt;
              &lt;h:outputText id="lastName" value="Last Name"/&gt;
          &lt;/p:column&gt;
      &lt;/p:row&gt;
  
      &lt;p:row&gt;
          &lt;p:column&gt;
              &lt;p:outputLabel for="address1" value="First Address" style="font-weight: bold;"/&gt;
          &lt;/p:column&gt;
  
          &lt;p:column rowspan="8" style="vertical-align: top;"&gt;
              &lt;h:outputText id="address1" styleClass="address" value="First Address"/&gt;
          &lt;/p:column&gt;
      &lt;/p:row&gt;
  
      &lt;p:row&gt;&lt;p:column&gt;&lt;h:outputText value="&amp;#160;" /&gt;&lt;/p:column&gt;&lt;/p:row&gt;
      &lt;p:row&gt;&lt;p:column&gt;&lt;h:outputText value="&amp;#160;" /&gt;&lt;/p:column&gt;&lt;/p:row&gt;
      &lt;p:row&gt;&lt;p:column&gt;&lt;h:outputText value="&amp;#160;" /&gt;&lt;/p:column&gt;&lt;/p:row&gt;
      &lt;p:row&gt;&lt;p:column&gt;&lt;h:outputText value="&amp;#160;" /&gt;&lt;/p:column&gt;&lt;/p:row&gt;
      &lt;p:row&gt;&lt;p:column&gt;&lt;h:outputText value="&amp;#160;" /&gt;&lt;/p:column&gt;&lt;/p:row&gt;
      &lt;p:row&gt;&lt;p:column&gt;&lt;h:outputText value="&amp;#160;" /&gt;&lt;/p:column&gt;&lt;/p:row&gt;
      &lt;p:row&gt;&lt;p:column&gt;&lt;h:outputText value="&amp;#160;" /&gt;&lt;/p:column&gt;&lt;/p:row&gt;
  &lt;/p:panelGrid&gt;
  </code></pre>
  
  <p>The CSS class : </p>
  
  <pre class="lang-css prettyprint-override"><code>.panelgrid-dotted-border.ui-panelgrid tr, .panelgrid-dotted-border.ui-panelgrid .ui-panelgrid-cell {
      border-top : 1px dotted #000;
      border-right : 1px dotted #000;
      border-bottom : 1px dotted #000;
      border-left : 1px dotted #000;
  }
  </code></pre>
  
  <p>The dotted border is not correctly applied to columns and rows which are split over rows and columns respectively as can be seen in the following picture.</p>
  
  <p><img src="https://i.stack.imgur.com/T2YnS.png" alt="enter image description here"></p>
  
  <p>The dotted border is applied incorrectly to the rows which are spanned through the first address row and to the column which is spanned through the header of the grid.</p>
  
  <p>How to apply the dotted border correctly?</p>