Tylko zaokrąglone rogi tabeli w CSS

Szukałem i szukałem, ale nie udało mi się znaleźć rozwiązania dla moich wymagań.

Mam zwykłą tabelę HTML. Chcę do tego mieć zaokrąglone rogi, bez używania obrazów lub JS, tj . Tylko czysty CSS . Lubię to:

Zaokrąglone rogi komórek narożnych i 1pxgrube obramowanie komórek.

Jak dotąd mam to:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Ale to pozostawia mnie bez granic dla komórek. Jeśli dodam ramki, nie są zaokrąglone!

Jakieś rozwiązania?

Wydaje się, że działa dobrze w FF i Chrome (nie testowałem żadnych innych) z oddzielnymi ramkami : http://jsfiddle.net/7veZQ/3/

Edycja: Oto stosunkowo czysta implementacja szkicu:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

Dla mnie rozwiązanie Twitter Bootstrap wygląda dobrze. Wyklucza IE <9 (brak zaokrąglonych rogów w IE 8 i niższych), ale myślę, że to jest OK, jeśli tworzysz przyszłe aplikacje internetowe.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>

Możesz się tym bawić tutaj (na jsFiddle)

Po pierwsze, będziesz potrzebować czegoś więcej niż tylko -moz-border-radiuswtedy, gdy chcesz obsługiwać wszystkie przeglądarki. Powinieneś określić wszystkie warianty, w tym zwykłe border-radius, w następujący sposób:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Po drugie, aby bezpośrednio odpowiedzieć na twoje pytanie, w border-radiusrzeczywistości nie wyświetla obramowania; po prostu ustala, jak wyglądają rogi obramowania, jeśli istnieje.

Aby włączyć obramowanie, a tym samym uzyskać zaokrąglone rogi, potrzebujesz również borderatrybutu na elementach tdi th.

td, th {
   border:solid black 1px;
}

Jeśli masz kolor tła (lub grafikę), zobaczysz również zaokrąglone rogi, chociaż oczywiście musiałby być inny kolor tła niż otaczający element, aby zaokrąglone rogi były widoczne bez obramowania.

Warto zauważyć, że niektóre starsze przeglądarki nie lubią umieszczać border-radiustabel / komórek tabel. Może warto umieścić <div>wewnątrz każdej komórki i zamiast tego stylizować. Nie powinno to jednak wpływać na obecne wersje żadnych przeglądarek (z wyjątkiem IE, która w ogóle nie obsługuje zaokrąglonych rogów - patrz poniżej)

Wreszcie, nie chodzi o to, że IE nie obsługuje border-radiusw ogóle (IE9 beta tak, ale większość użytkowników IE będzie korzystać z IE8 lub mniej). Jeśli chcesz zhakować IE, aby obsługiwał border-radius, spójrz na http://css3pie.com/

[EDYTOWAĆ]

Okej, to mnie niepokoiło, więc zrobiłem kilka testów.

Oto przykład JSFiddle, z którym się bawiłem

Wygląda na to, że najważniejszą rzeczą, której brakowało, był border-collapse:separate;element tabeli. Uniemożliwia to komórkom łączenie ich granic ze sobą, co pozwala im odebrać promień obramowania.

Mam nadzieję, że to pomoże.

Wybrana odpowiedź jest okropna. Zaimplementowałbym to, celując w komórki tabeli narożnej i stosując odpowiedni promień obramowania.

Aby uzyskać górne rogi, ustaw promień obramowania na pierwszym i ostatnim typie th elementów, a następnie zakończ, ustawiając promień obramowania ostatniego typu td i ostatniego typu tr, aby uzyskać dolne rogi.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Najlepsze rozwiązanie, jakie znalazłem dla zaokrąglonych rogów i innych zachowań CSS3 dla IE <9, można znaleźć tutaj: http://css3pie.com/

Pobierz wtyczkę, skopiuj do katalogu w strukturze rozwiązania. Następnie w swoim arkuszu stylów upewnij się, że masz tag behawioralny, aby pobierał wtyczkę.

Prosty przykład z mojego projektu, który daje mi zaokrąglone rogi, gradient kolorów i cień pola dla mojego stołu:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Nie martw się, jeśli funkcja IntelliSense CSS w programie Visual Studio daje zielone podkreślenie dla nieznanych właściwości, nadal działa po uruchomieniu. Niektóre elementy nie są dobrze udokumentowane, ale przykłady są całkiem dobre, zwłaszcza na pierwszej stronie.

Dzięki osobistemu doświadczeniu odkryłem, że nie jest możliwe zaokrąglanie rogów komórki tabeli HTML za pomocą czystego CSS. Możliwe jest zaokrąglenie skrajnej krawędzi stołu.

Będziesz musiał skorzystać z obrazów opisanych w tym samouczku lub podobnych :)

To trochę szorstkie, ale oto coś, co złożyłem, co składa się w całości z CSS i HTML.

• Zewnętrzne rogi zaokrąglone
• Wiersz nagłówka
• Wiele wierszy danych

W tym przykładzie użyto również :hoverpseudoklasy dla każdej komórki danych <td>. Elementy można łatwo aktualizować, aby spełniały Twoje potrzeby, a dymek można szybko wyłączyć.

(Jednak nie udało mi się jeszcze :hoverpoprawnie działać dla pełnych rzędów <tr>. Ostatni najechany wiersz nie jest wyświetlany z zaokrąglonymi rogami na dole. Jestem pewien, że jest coś prostego, co jest pomijane).

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}

<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>

Dodaj <div>opakowanie dookoła stołu i zastosuj następujący kod CSS

border-radius: x px;
overflow: hidden;
display: inline-block;

do tego opakowania.

Aby dostosować genialną odpowiedź @luke Flournoy - a jeśli nie używasz thw swoim stole, oto wszystkie CSS, których potrzebujesz, aby stworzyć zaokrągloną tabelę:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

W przypadku obramowanej i przewijalnej tabeli użyj tego (zamień zmienne, $teksty początkowe)

Jeśli używasz thead, tfootlub thpo prostu wymień tr:first-childi tr-last-childi tdrazem z nimi.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Możesz to wypróbować, jeśli chcesz mieć zaokrąglone rogi po każdej stronie tabeli bez dotykania komórek: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>

Przykładowy kod HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, łatwo przekonwertowany do CSS, użyj sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Oto coś, czego używałem i działało dla mnie w różnych przeglądarkach, więc mam nadzieję, że pomoże to komuś w przyszłości:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Oczywiście #contentblockczęść można zastąpić / edytować w razie potrzeby, a border-radius.htcplik można znaleźć, wyszukując w Google lub ulubionej przeglądarce internetowej.

To jest css3 , że obsługuje go tylko najnowsza przeglądarka inna niż IE <9.

Sprawdź tutaj , wyprowadza właściwość round dla wszystkich dostępnych przeglądarek

Dodaj między <head>tagami:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

iw ciele:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

Kolor, zawartość i formatowanie komórek są oczywiście na przykład;
chodzi o rozmieszczanie komórek wypełnionych kolorem w elemencie div. W ten sposób czarne obramowanie komórek / obramowanie tabeli są w rzeczywistości kolorem tła div.
Zauważ, że musisz ustawić div-border-radius o około 2 wartości większe niż promienie obramowania rogów oddzielnych komórek, aby uzyskać gładki efekt zaokrąglonego narożnika.

Lekcja z obramowaniem tabel ...

UWAGA: Poniższy kod HTML / CSS powinien być wyświetlany tylko w przeglądarce IE. Kod nie będzie poprawnie renderowany w przeglądarce Chrome!

Musimy pamiętać, że:

1. Tabela ma granicę: jej zewnętrzną granicę (która może mieć również border-radius).

2. Same komórki TAKŻE mają obramowania (które również mogą mieć border-radius).

3. Obramowania tabeli i komórek mogą ze sobą kolidować:

   Obramowanie komórki może przebić granicę tabeli (tj. Granicę tabeli).

   Aby zobaczyć ten efekt, zmień reguły stylu CSS w poniższym kodzie w następujący sposób:
   i. table {border-collapse: oddzielne;}
   ii. Usuń reguły stylu, które otaczają komórki narożne tabeli.
   iii. Następnie baw się z odstępami między obramowaniem, aby zobaczyć zakłócenia.

4. Jednak obramowanie tabeli i obramowanie komórek można ZWINIĘĆ (używając: border-collapse: collapse;).

5. Gdy są zwinięte, obramowania komórek i tabeli zakłócają się w inny sposób:

   ja. Jeśli obramowanie tabeli jest zaokrąglone, ale obramowania komórek pozostają kwadratowe, wówczas kształt komórki ma pierwszeństwo, a tabela traci zakrzywione rogi.

   ii. I odwrotnie, jeśli komórki narożne są zakrzywione, ale granica tabeli jest kwadratowa, zobaczysz brzydki kwadratowy róg graniczący z krzywizną komórek narożnych.

6. Biorąc pod uwagę, że atrybut tej komórki ma pierwszeństwo, sposobem na zaokrąglenie czterech rogów tabeli jest:

   ja. Zwijanie obramowań w tabeli (używając: border-collapse: collapse;).

   ii. Ustawianie żądanej krzywizny w komórkach narożnych tabeli.
   iii. Nie ma znaczenia, czy narożniki stołu są zaokrąglone (tj .: jego promień-border może wynosić zero).

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}

			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}