Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26740
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: Rounded Borders
You're very welcome, Shannt!
|
9/12/2020, 5:45 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Shannt
Regular poster
Registered: 02-2019
Location: Texas
Posts: 143
Karma: 0 (+0/-0)
|
Reply | Quote
|
|
Re: Re:
quote: Shannt wrote:
Okay, I can't seem to get this part rounded.
/* DEFINES COLORS AND IMAGES IN MESSAGE AREA */
.ak_msgform_master_table {
background : #F1E8DA;
border : 2px solid #AE9978;
padding: 25px;
border-radius: 8px !important;
}
.ak_msgform_master_table td {
border : 0;
border-radius: 8px !important;
}
.ak_msgform_master_table input {
border : 0px solid #ccc;
border-radius: 8px !important;
}
Can someone please help me fix this part again? It's not working. It's on my och457 test board.
---
|
8/26/2021, 6:28 pm
|
Link to post
Email Shannt
PM Shannt
|
Susa
Global Administrator
Registered: 07-2006
Location: Oχάιο
Posts: 4623
Karma: 128 (+137/-9)
|
Reply | Quote
|
|
Re: Rounded Borders
Help should be here sometime overnight tonight.
|
8/27/2021, 12:40 am
|
Link to post
PM Susa
Blog
|
Shannt
Regular poster
Registered: 02-2019
Location: Texas
Posts: 143
Karma: 0 (+0/-0)
|
Reply | Quote
|
|
Re: Rounded Borders
Thank you Susa. 🙂
---
|
8/27/2021, 3:20 am
|
Link to post
Email Shannt
PM Shannt
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26740
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: Rounded Borders
Hi Shannt,
You have to also put border-radius on the TDs that meet the inside corners of that table. Since the default.css collapses the borders in that table, and rounded corners won't work with collapsed borders, you also need to add border-collapse: separate.
I have added the following three lines to your CSS, directly below the CSS you posted here, and removed the !important declaration since that isn't necessary in this case. I understand why you added !important, and it was good that you thought to try it.
.ak_msgform_master_table { border-collapse: separate; }
.ak_msgform_master_table tr:first-child td { border-radius: 8px 8px 0 0; }
.ak_msgform_master_table tr:last-child td { border-radius: 0 0 8px 8px; }
Note: Since there is only one <td> stretching across the top of that table, and only one <td> stretching across the bottom, the above CSS works for that particular table. However, if there were two or more <td>s in the first row and two or more <td>s in the last row, it would have required more CSS. If the <td> had its own class name, you could target the <td> by its class. However, if the <td> doesn't have its own class name, you could use CSS like you see below, changing .ak_msgform_master_table to the class of the <table> itself.
.ak_msgform_master_table { border-collapse: separate; }
.ak_msgform_master_table tr:first-child td:first-child { border-top-left-radius: 8px; }
.ak_msgform_master_table tr:first-child td:last-child { border-top-right-radius: 8px; }
.ak_msgform_master_table tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.ak_msgform_master_table tr:last-child td:last-child { border-bottom-right-radius: 8px; }
I hope this helps!
|
8/27/2021, 7:21 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|