Cómo eliminar borde de PrimeFaces específicos p: panelGrid?

Estoy usando Primefaces 6.0 y para eliminar los bordes de mi cuadrícula del panel uso esta clase de estilo "ui-noborder" de la siguiente manera:

<p:panelGrid columns="3" styleClass="ui-noborder">
   <!--panel grid contents -->
</p:panelGrid>

Utiliza un archivo css llamado "componentes" en primefaces lib

Esto funcionó para mí:

.ui-panelgrid td, .ui-panelgrid tr
{
    border-style: none !important
}

Si la respuesta de BalusC no funciona, prueba esto:

.companyHeaderGrid td {
     border-style: hidden !important;
}

Si encuentra una línea entre las columnas, use el siguiente código,

.panelNoBorder, .panelNoBorder tr, .panelNoBorder td{
border: hidden;
border-color: white;
}

He comprobado esto con Primefaces 5.1

<h:head>
     <title>Login Page</title>    
     <h:outputStylesheet library="css" name="common.css"/>
</h:head> 

<p:panelGrid id="loginPanel" columns="3" styleClass="panelNoBorder">
<p:outputLabel value="Username"/> <p:inputText id="loginTextUsername"/>
<p:outputLabel value="Password"/> <p:password id="loginPassword"/>
<p:commandButton id="loginButtonLogin" value="Login"/> <p:commandButton id="loginButtonClear" value="Clear"/>
</p:panelGrid>  

Hoy, Primefaces 5.x tiene un atributo en panelGrid llamado "columnClasses".

.no-border {
    border-style: hidden !important ; /* or none */

} Por lo tanto, a un panelGrid con 2 columnas, repita dos veces la clase css.

<p:panelGrid columns="2" columnClasses="no-border, no-border">

A otros elementos, el feo"!importante " no es necesario, pero a la frontera solo con él me funciona bien.

Intenta

<p:panelGrid styleClass="ui-noborder">

Simplemente agregue esas líneas en su mycss css personalizado.css

table tbody .ui-widget-content {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 solid #FFFFFF;
    color: #333333;
}

Como menciona BalusC, el borde se establece por PrimeFaces en los elementos generados tr y td, no en el table. Sin embargo, al probar con PrimeFaces versión 5, parece que hay una coincidencia más específica de PrimeFaces CSS .ui-panelgrid .ui-panelgrid-cell > solid que aún resulta en bordes negros que se muestran cuando se aplica el estilo sugerido.

Intente usar el siguiente estilo para sobreescribir el Primefaces sin usar la declaración !important:

.companyHeaderGrid tr, .companyHeaderGrid td.ui-panelgrid-cell {
    border: none;
}

Como mención asegúrese de que su CSS es cargado después del PrimeFaces uno.

Si solo quieres algo más simple, puedes cambiar:

<p:panelGrid >

</p:panelGrid>

A:

<h:panelGrid border="0">

</h:panelGrid>

Eso ha funcionado bien para mí

Para mí solo funciona el siguiente código

.noBorder tr {
border-width: 0 ;
}
.ui-panelgrid td{
    border-width: 0
}

<p:panelGrid id="userFormFields" columns="2" styleClass="noBorder" >
</p:panelGrid>

Para que los temas tradicionales, así como todos los modernos, no tengan bordes, aplique lo siguiente;

<!--No Border on PanelGrid-->
    <h:outputStylesheet>
        .ui-panelgrid, .ui-panelgrid td, .ui-panelgrid tr, .ui-panelgrid tbody tr td
        {
            border: none !important;
            border-style: none !important;
            border-width: 0px !important;
        }
    </h:outputStylesheet>

Por favor, pruebe esto también

.ui-panelgrid tr, .ui-panelgrid td {
border:0 !important;
}

Use debajo de la modificación de estilo para eliminar el borde de Primefaces botón de opción

.ui-selectoneradio td, .ui-selectoneradio tr
{
    border-style: none !important
}