CSS3的边界半径和边界坍塌:崩溃不能混合。如何使用边界半径来创建圆角的折叠表?

Edit - Original Title: Is there an alternative way to achieve border-collapse:collapse in CSS (in order to have a collapsed, rounded corner table)?

编辑-原始标题:是否有另一种方法来实现边界崩溃:CSS的崩溃(为了有一个折叠的圆角表)?

Since it turns out that simply getting the table's borders to collapse does not solve the root problem, I have updated the title to better reflect the discussion.

因为事实证明，简单地让表的边界崩溃并不能解决根本问题，我已经更新了标题以更好地反映讨论。

I am trying to make a table with rounded corners using the CSS3 border-radius property. The table styles I'm using look something like this:

我正在尝试用CSS3边界半径的属性来做一个圆角的表格。我使用的表格样式是这样的:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

Here's the problem. I also want to set the border-collapse:collapse property, and when that is set border-radius no longer works. Is there a CSS-based way I can get the same effect as border-collapse:collapse without actually using it?

问题就在这里。我还想设置边界崩溃:崩溃属性，当设置边界半径不再工作时。有没有一种基于cpu的方法，我可以得到与边界崩溃同样的效果:在不实际使用的情况下崩溃?

Edits:

编辑:

I've made a simple page to demonstrate the problem here (Firefox/Safari only).

我做了一个简单的页面来演示这里的问题(Firefox/Safari)。

It seems that a large part of the problem is that setting the table to have rounded corners does not affect the corners of the corner td elements. If the table was all one color, this wouldn't be a problem since I could just make the top and bottom td corners rounded for the first and last row respectively. However, I am using different background colors for the table to differentiate the headings and for striping, so the inner td elements would show their rounded corners as well.

似乎问题的很大一部分在于，将表设置为圆角并不会影响到角落的td元素。如果表格都是一种颜色，那么这就不是问题了，因为我可以分别把顶部和底部的td角分别设置为第一行和最后一行。但是，我使用不同的背景颜色来区分标题和条纹，所以内部的td元素也会显示他们的圆角。

Summary of proposed solutions:

总结提出解决方案:

Surrounding the table with another element with round corners doesn't work because the table's square corners "bleed through."

围绕着桌子周围的另一个元素，圆角不工作，因为桌子的方角“渗出”。

Specifying border width to 0 doesn't collapse the table.

指定边界宽度为0不会导致表崩溃。

Bottom td corners still square after setting cellspacing to zero.

底部的td角仍然是方形的，将cell间距设置为0。

Using JavaScript instead- works by avoiding the problem.

使用JavaScript，避免问题。

Possible solutions:

可能的解决方式:

The tables are generated in PHP, so I could just apply a different class to each of the outer th/tds and style each corner separately. I'd rather not do this, since it's not very elegant and a bit of a pain to apply to multiple tables, so please keep suggestions coming.

这些表是用PHP生成的，所以我可以将一个不同的类应用到每一个外部/tds和每个角落。我宁愿不这样做，因为它不太优雅，而且应用到多个表上有点痛苦，所以请继续建议。

Possible solution 2 is to use JavaScript (jQuery, specifically) to style the corners. This solution also works, but still not quite what I'm looking for (I know I'm picky). I have two reservations:

可能的解决方案2是使用JavaScript(特别是jQuery)来设计各个角落。这个解决方案也有效，但仍然不是我想要的(我知道我很挑剔)。我有两个预订:

this is a very lightweight site, and I'd like to keep JavaScript to the barest minimum
这是一个非常轻量级的站点，我希望将JavaScript保持在最低限度。
part of the appeal that using border-radius has for me is graceful degradation and progressive enhancement. By using border-radius for all rounded corners, I hope to have a consistently rounded site in CSS3-capable browsers and a consistently square site in others (I'm looking at you, IE).
使用边界半径对我的部分吸引力是优雅的退化和渐进的增强。通过对所有圆角的边界半径，我希望在css3有能力的浏览器中有一个一致的圆形站点，并且在其他浏览器中有一个一致的正方形站点(我正在看着你，IE)。

I know that trying to do this with CSS3 today may seem needless, but I have my reasons. I would also like to point out that this problem is a result of the w3c specification, not poor CSS3 support, so any solution will still be relevant and useful when CSS3 has more widespread support.

我知道今天想用CSS3做这件事似乎是不需要的，但我有我的理由。我还想指出的是，这个问题是w3c规范的结果，而不是CSS3的支持，所以当CSS3得到更广泛的支持时，任何解决方案仍然是相关的和有用的。

20 个解决方案

#1

191

I figured it out. You just have to use some special selectors.

我想出来。你只需要使用一些特殊的选择器。

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

四舍五入的问题是，td元素没有变得四舍五入。你可以这样做:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

Now everything rounds properly, except that there's still the issue of border-collapse: collapse breaking everything. A workaround is to set cellspacing="0" in the html instead (thanks, Joel).

现在，一切都很顺利，只是还存在着边界崩溃的问题:崩溃瓦解一切。一个变通方法是在html中设置cell间距="0"(谢谢，Joel)。

#2

The following method works (tested in Chrome) by using a box-shadow with a spread of 1px instead of a "real" border.

下面的方法(在Chrome中测试)使用一个带有1px的框阴影，而不是一个“真正的”边框。

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}

#3

If you want a CSS-only solution (no need to set cellspacing=0 in the HTML) that allows for 1px borders (which you can't do with the border-spacing: 0 solution), I prefer to do the following:

如果您想要一个CSS-only解决方案(不需要在HTML中设置cellspace =0)，那么就允许1px的边界(您不能使用边界间距:0解决方案)，我更愿意做以下工作:

Set a border-right and border-bottom for your table cells (td and th)
为你的表格单元格设置一个边框和边框(td和th)
Give the cells in the first row a border-top
在第一行中给细胞一个边界顶部。
Give the cells in the first column a border-left
在第一个列中给细胞一个边界。
Using the first-child and last-child selectors, round the appropriate corners for the table cells in the four corners.
使用第一个和最后一个子选择器，在四个角的表格单元的适当的角落。

See a demo here.

看到一个演示。

Given the following HTML:

鉴于以下HTML:

SEE example below:

请参见下面的例子:

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }

<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

#4

Have you tried using table{border-spacing: 0} instead of table{border-collapse: collapse} ???

您是否尝试使用table{border-间距:0}而不是table{边界崩溃:崩溃}??

#5

You'll probably have to put another element around the table and style that with a rounded border.

您可能需要将另一个元素放在表和样式中，该元素具有一个圆形边框。

The working draft specifies that border-radius does not apply to table elements when the value of border-collapse is collapse.

工作草案规定，当边界崩溃的值崩溃时，边界半径并不适用于表元素。

#6

As Ian said, the solution is to nest the table inside a div and set it like that:

正如Ian所说，解决方案是将表嵌套在一个div中，并设置成这样:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

With overflow:hidden, the square corners won't bleed through the div.

有溢出:隐藏，方角不会在div中流血。

#7

To the best of my knowledge, the only way you could do it would be to modify all the cells like so:

据我所知，你唯一能做的就是修改所有的细胞，比如:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

And then to get the border on the bottom and right back

然后是底部和右边的边界。

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-child is not valid in ie6, but if you are using border-radius I assume you don't care.

:last-child在ie6中是无效的，但如果你使用的是边界半径，我假设你不关心。

EDIT:

编辑:

After looking at your example page, it appears that you may be able to work around this with cell spacing and padding.

在查看了示例页面之后，似乎您可以使用单元格间距和填充来解决这个问题。

The thick gray borders you are seeing are actually the background of the table (you can see this clearly if you change the border color to red). If you set the cellspacing to zero (or equivalently: td, th { margin:0; }) the grey "borders" will disappear.

您所看到的灰色边框实际上是表的背景(如果将边框颜色更改为红色，您可以清楚地看到这一点)。如果将cell间距设置为0(或相等:td, th {margin:0;灰色的“边界”将会消失。

EDIT 2:

编辑2:

I can't find a way to do this with only one table. If you change your header row to a nested table, you might possibly be able to get the effect you want, but it'll be more work, and not dynamic.

我找不到一种方法只用一张表就能做到这一点。如果您将标题行更改为嵌套表，您可能会得到您想要的效果，但它将是更多的工作，而不是动态的。

#8

I tried a workaround using the pseudo elements :before and :after on the thead th:first-child and thead th:last-child

我尝试了一种使用假元素的方法:在第一个孩子和第一个孩子之后:第一个孩子和第一个孩子。

In combination with wrapping the table with a <div class="radius borderCCC">

结合使用

包装表格。

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

see jsFiddle

看到jsFiddle

Works for me in chrome (13.0.782.215) Let me know if this works for you in other browsers.

在chrome中工作(13.0.782.215)让我知道这对你在其他浏览器是否适用。

#9

I had the same problem. remove border-collapse entirely and use: cellspacing="0" cellpadding="0" in the html document. example:

我遇到了同样的问题。在html文档中完全删除边界折叠，并使用:cell间距="0" cellpadding="0"。例子:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

#10

The given answers only work when there are no borders around the table, which is very limiting!

只有在没有边界的情况下，给出的答案才有效，这是非常有限的!

I have a macro in SASS to do this, which fully supports external and internal borders, achieving the same styling as border-collapse: collapse without actually specifying it.

我在SASS中有一个宏来做这个，它完全支持外部和内部边界，实现与边界崩溃相同的样式:在没有实际指定的情况下崩溃。

Tested in FF/IE8/Safari/Chrome.

在FF / IE8 / Safari和Chrome进行测试。

Gives nice rounded borders in pure CSS in all browsers but IE8 (degrades gracefully) since IE8 doesn't support border-radius :(

在所有的浏览器中都提供了纯CSS的漂亮的圆形边框，但是IE8(优雅地降级)，因为IE8不支持边框半径:(

Some older browsers may require vendor prefixes to work with border-radius, so feel free to add those prefixes to your code as necessary.

一些旧的浏览器可能需要供应商前缀来处理边界半径，所以在必要时可以随意添加这些前缀。

This answer is not the shortest - but it works.

这个答案不是最短的，但它是可行的。

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

To apply this style simply change your

要应用这种风格，只需改变你的风格。

<table>

tag to the following:

标记如下:

<table class="roundedTable">

and be sure to include the above CSS styles in your HTML.

并且确保在HTML中包含上述CSS样式。

Hope this helps.

希望这个有帮助。

#11

For a bordered and scrollable table, use this (replace variables, $ starting texts)

对于有边框和可滚动的表，可以使用这个(替换变量，$起始文本)

If you use thead, tfoot or th, just replace tr:first-child and tr-last-child and td with them.

如果你使用ad, tfoot或th，只是替换tr:第一个孩子和trl -last-child和td。

#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>

#12

I just wrote a crazy set of CSS for this that seems to work perfectly:

我刚写了一套很疯狂的CSS，看起来效果很好:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

#13

Solution with border-collapse:separate for table and display:inline-table for tbody and thead.

与边界折叠的解决方案:单独用于表格和显示:用于tbody和thead的inline-table。

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

#14

I am new with HTML and CSS and I was also looking for solution for this, here what I find.

我是新的HTML和CSS，我也在寻找解决方案，这里我发现。

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

I try it, guess what it works :)

我尝试一下，猜猜它是怎么工作的:)

#15

Found this answer after running into the same problem, but found it's pretty simple: just give the table overflow:hidden

在遇到相同的问题后，找到了这个答案，但是发现它非常简单:只给表溢出:隐藏。

No need for a wrapping element. Granted, I don't know if this would have worked 7 years ago when the question was initially asked, but it works now.

不需要包装元素。当然，我不知道这是否会在7年前当这个问题被问到的时候起作用，但它现在起作用了。

#16

I started experiment with "display" and I found that: border-radius, border, margin, padding, in a table are displayed with:

我开始实验“显示”，我发现:边框，边框，边距，填充，在一个表格中显示:

display: inline-table;

For example

例如

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

But we need set a width of every column

但是我们需要设置每个列的宽度。

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

#17

Here is a recent example of how to implement a table with rounded-corners from http://medialoot.com/preview/css-ui-kit/demo.html. It's based on the special selectors suggested by Joel Potter above. As you can see, it also includes some magic to make IE a little happy. It includes some extra styles to alternate the color of the rows:

这里有一个最近的例子，说明如何从http://medialoot.com/preview/css- kit/demo.html实现一个圆角的表。它是基于Joel Potter提出的特殊选择器。正如你所看到的，它还包含了一些让IE有点快乐的魔法。它包括一些额外的样式来替换行的颜色:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

#18

Actually you can add your table inside a div as its wrapper. and then assign these CSS codes to wrapper:

实际上，您可以将您的表添加到div中作为它的包装器。然后将这些CSS代码分配给包装器:

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

#19

-1

Border-radius is now officially supported. So, in all of the above examples you may drop the "-moz-" prefix.

现在官方支持边界半径。因此，在以上所有示例中，您可以删除“-moz-”前缀。

Another trick is to use the same color for the top and bottom rows as is your border. With all 3 colors the same, it blends in and looks like a perfectly rounded table even though it isn't physically.

另一个技巧是使用相同的颜色来处理顶部和底部的行，就像你的边框一样。这三种颜色都是一样的，它混合在一起，看起来就像一张完美的圆桌，尽管它不是身体上的。

#20

-1

I always do this way using Sass

我总是用Sass。

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

#1

191