Закруглить края таблицы css

How to add border radius on table row

Does anyone know how to style tr as we like? I’ve used border-collapse on table, after that tr’s can display 1px solid border I give them. However, when I’ve tried -moz-border-radius , it doesn’t work. Even simple margin doesn’t work.

18 Answers 18

You can only apply border-radius to td, not tr or table. I’ve gotten around this for rounded corner tables by using these styles:

table < border-collapse: separate; border-spacing: 0; >td < border: solid 1px #000; border-style: none solid solid none; padding: 10px; >tr:first-child td:first-child < border-top-left-radius: 10px; >tr:first-child td:last-child < border-top-right-radius: 10px; >tr:last-child td:first-child < border-bottom-left-radius: 10px; >tr:last-child td:last-child < border-bottom-right-radius: 10px; >tr:first-child td < border-top-style: solid; >tr td:first-child

 
 
1.1
 
1.2
 
1.3
 
 
2.1
 
2.2
 
2.3
 
 
3.1
 
3.2
 
3.3
 
 

Be sure to provide all the vendor prefixes. You can see it in action on JSFiddle too.

@KevinBorders that is incorrect, at least in Chrome v39. I did have a problem getting this to work when I had background-color applied to the table itself. Apparently it must be on the tr or td elements.

Actual Spacing Between Rows

This is an old thread, but I noticed reading the comments from the OP on other answers that the original goal was apparently to have border-radius on the rows, and gaps between the rows. It does not appear that the current solutions exactly do that. theazureshadow’s answer is headed in the right direction, but seems to need a bit more.

The code is as follows (and as theazureshadow noted, for earlier browser support, the various vendor prefixes for border-radius need added).

table < border-collapse: separate; border-spacing: 0 10px; margin-top: -10px; /* correct offset on first border spacing if desired */ >td < border: solid 1px #000; border-style: solid none; padding: 10px; background-color: cyan; >td:first-child < border-left-style: solid; border-top-left-radius: 10px; border-bottom-left-radius: 10px; >td:last-child

Bonus info: border-radius has no effect on tables with border-collapse: collapse; and border set on td ‘s. And it doesn’t matter if border-radius is set on table , tr or td —it’s ignored.

@JukkaK.Korpela Yes, if border-collapse: collapse; is not set, click the toggle button and see magic happen.

The tr element does honor the border-radius. Can use pure html and css, no javascript.

tr < border: 0; display: block; margin: 5px; >.solid < border: 2px red solid; border-radius: 10px; >.dotted < border: 2px green dotted; border-radius: 10px; >.dashed < border: 2px blue dashed; border-radius: 10px; >td

 
 
01
 
02
 
03
 
04
 
05
 
06
 
 
07
 
08
 
09
 
10
 
11
 
12
 
 
13
 
14
 
15
 
16
 
17
 
18
 
 
19
 
20
 
21
 
22
 
23
 
24
 
 
25
 
26
 
27
 
28
 
29
 
30
 
 

Changing the TR’s display property to «block» will most likely mess up the layout of the table. In particular, if your table has multiple rows containing various content lengths, the table cells will not align up.

@Jess is right. It only works with display: block , as a side effect, the row alignment will be broken if it contains various length.

According to Opera the CSS3 standard does not define the use of border-radius on TDs. My experience is that Firefox and Chrome support it but Opera does not (don’t know about IE). The workaround is to wrap the td content in a div and then apply the border-radius to the div.

table.reportTable < border-collapse: separate; border-spacing: 0; >table.reportTable td < border: solid gray 1px; border-style: solid none none solid; padding: 10px; >table.reportTable td:last-child < border-right: solid gray 1px; >table.reportTable tr:last-child td < border-bottom: solid gray 1px; >table.reportTable th < border: solid gray 1px; border-style: solid none none solid; padding: 10px; >table.reportTable th:last-child < border-right: solid gray 1px; border-top-right-radius: 10px; >table.reportTable th:first-child < border-top-left-radius: 10px; >table.reportTable tr:last-child td:first-child < border-bottom-left-radius: 10px; >table.reportTable tr:last-child td:last-child

Feel free to adjust the paddings, radiuses, etc to fit your needs. Hope that helps people!

I think collapsing your borders is the wrong thing to do in this case. Collapsing them basically means that the border between two neighboring cells becomes shared. This means it’s unclear as to which direction it should curve given a radius.

Instead, you can give a border radius to the two lefthand corners of the first TD and the two righthand corners of the last one. You can use first-child and last-child selectors as suggested by theazureshadow, but these may be poorly supported by older versions of IE. It might be easier to just define classes, such as .first-column and .last-column to serve this purpose.

I collapse the border so the tr can display the style I give. I’ll try the class method. but what about margin? i tried using border-spacing to display margins between rows, but that isn’t the best way to do that, I believe.

There can be no margins between the rows if they share a border — that is when the border is collapsed. I am assuming what you’re trying to do is get your TRs to have a background color with rounded corners? If so, un-collapsing them should work

actually the more pressing matter is to display margin between rows with borders. The border doesn’t necessarily have to have rounded corners though

Источник

Закруглённые углы (свойство border-radius) | CSS

Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.

background box-shadow outline [решение] border-image [решение]

Круглые углы у картинки

border-radius легко справится и с этой задачей, достаточно его добавить к HTML коду изображения.

style="border-radius: 100%;">

Закруглить края у видео на YouTube

HTML таблица с закругленными углами

Закруглить таблицу можно, но с border-collapse: separate;

1	2	3
1.1	2.1	3.1
1.2	2.2	3.2

 
 
 
1
 
2
 
3
 
 
 
1.1
 
2.1
 
3.1
 
 
1.2
 
2.2
 
3.2
 
 

border-radius у вложенных элементов

Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы

внешний радиус = внутренний радиус + ширина рамки 47px = 32px + 15px

CSS скругление углов у border-image

Чтобы сделать скругленные углы у border-image можно применить родительский блок. Вернее два родительских блока, один из которых округляет внешние края рамки, а другой — внутренние.

Округление outline

Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).

Закругление углов в примерах

HTML овал

HTML круг

Тоже самое, только чтобы сделать круг, нужно скруглить углы квадрата, а не прямоугольника.

HTML цилиндр

Закругленные три края, HTML капля

HTML полукруг

HTML лист

HTML яйцо

Камушек HTML

29 комментариев:

Tanka Спасибо! Очень интересно =) витько Польза.
Приятный сайт,полезная статья Анонимный Спасибо большое! Давно искала такой материал. Супер сайт. Наталка Михайлівна Зуб Я как всегда ничего не поняла (ну далекая я от всего этого). Скажите пожалуйста, можно ли в моем шаблоне(путешествие) сделать закругленные углы, чтобы было как в шаблоне Венецианское окно (вариант 2).Там еще на главной странице каждое сообщение отделено один от одного, а у меня идет одним потоком и где заканчивается одно сообщение и начинается второе можно узнать только по дате.
Мой блог http://revival2012nataliz.blogspot.com/ NMitra Посмотрите эту страницу http://shpargalkablog.ru/2010/12/pomenyat-fon-gadzhetov-blogger.html Наталка Михайлівна Зуб Спасибо большое!С закругленными углами для гаджетов не получилось, так как тяжело потом подобрать цвет фона под блог и встроенные гаджеты не очень(погодный информер глобус и т.д.)Но главное что получилось с сообщениями.Еще раз спасибо за помощь!Я часто пользуюсь Вашей помощью и Ваш блог мне очень помогает! Сергей А этот код поддерживается во всех браузерах? Хочу сделать округлые пункты меню http://antiloh.net в шапке сайта. Сергей В IE не работает, не критично — для информации NMitra Последние версии IE поддерживают это свойство. См http://caniuse.com/#search=border-radius Космо Мизраил «Чтобы сделать круг, нужно использовать квадрат.»
Мой мозг х) Наталья, может, стоит написать «использовать блок квадратной формы»? 🙂 NMitra Ха-ха-ха.. Подправила. Евгений Курочкин Отличная статья!
Для скругления в IE 6-8 есть доп коды — http://css3pie.com/, например. Не пренебрегайте IE, так как много пользователей работают именно с ним. NMitra На мой взгляд, увидит человек скруглённые уголки или нет не сильно повлияет на работоспособность сайта. Поэтому именно в этом случае можно пренебречь поздними версиями IE. Гораздо хуже, если человек не сможет воспользоваться формой заказа, потому что использован document.querySelector.

Вот позиция Гугл мне нравится: наплевали они на всех, кто ранние версии браузеров используют. Хочешь красивого вида сайта — нажми кнопку «Обновить». Анонимный Мне понравилась фига — фавикон сайта =) NMitra Мне тоже)) Жаль, что её некоторые путают с другой частью тела. Родион Спасибо огромное! NMitra Пожалуйста! Анна Сычева Спасибо огромное! нашла то, что искала, и даже лучше! рамка из тени — это просто праздник 🙂 NMitra Рада слышать! Анонимный бабки давай сюда! Fedor Timofeev Как сделать что бы стили не конфликтовали?
Не работает стиль
/*Круглые углы у таблицы */
div.radius border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */

Если ставлю стиль
img.grayscale width: 200px;
height: 200px;
border-radius: 50%;
для другого див NMitra Пример на https://jsfiddle.net/ выложите и его ссылку дайте в комментариях, а лучше свою страницу. Можете сами попробовать разобраться в селекторах. Приоритетный тот, что длиннее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Вам что нужно: 15px или 50%? Fedor Timofeev Здравствуйте.
мне нужны и 15px и 50%? так как используются в абсолютно разных случаях.
Может из как то переименовать?

ссылка на страницу, где применяются оба класса: http://ex-hort.ru/

class=»grayscale grayscale-fade»
CSS: /*обесцвечивание круглой картинки */

img.grayscale -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover -webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg opacity: 0;
>
img.grayscale width: 200px;
height: 200px;
border-radius: 50%;
>

/*обесцвечивание круглой картинки конец */

CSS: /*Круглые углы у таблицы */
div.radius border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
Fedor Timofeev что все дивы куда то подевались. NMitra Здравствуйте, код в комментариях через http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html пропустите. И всё же я не поняла что не так. Как могут конфликтовать стили, если они привязаны к разным тегам? Расскажите, пожалуйста, на словах, например, так «Картинка с нарисованным попугаем должна быть закруглена на 15px, а она на 50%». Fedor Timofeev Так, ладно, на пальцах.
До того как в CSS вставил /*обесцвечивание круглой картинки */

img.grayscale -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover -webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg opacity: 0;
>
img.grayscale width: 200px;
height: 200px;
border-radius: 50%;
>

ВОТ ЭТОТ СТИЛЬ, который ниже, РАБОТАЛ
CSS: /*Круглые углы у таблицы */
div.radius border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
НО ПОСЛЕ ПОЯВЛЕНИЯ В CSS /*обесцвечивание круглой картинки */

Стиль border-radius: 15px; тупо не работает. NMitra Проверяйте ошибки в CSS. Я, например, увидела «яЛП»

img.grayscale width: 200px;
height: 200px;
border-radius: 50%;
>яЛП Fedor Timofeev Спасибо большое за содействие но проблема решилась и Ваша помощь тоже была очень нужна.
Здесь мне всё помогли:
http://goo.gl/BRNaui
С удовольствием размещу ссылку на Ваш ресурс без rel=»nofollow» на своем сайте без всяких условий с моей стороны.
Укажите как Вы хотите видеть свою ссылку.
На почту vamsydanado-a@yandex.ru

NMitra А я увидела в исходном коде не точку, а «яЛП»

По поводу ссылки: с каким пожелаете анкором, на какую захотите страницу. Всегда считала, что естественную ссылку может поставить только автор веб-проекта. А на «Шпаргалку блоггера» ведут в основном такие.

Источник

Как скруглить края у таблицы (border-radius)

Нужно скруглить края у всей таблицы. Я уже как не пытался, к чему не применял. Я у первого td скгруглить пытался, у tr пытался. У всей таблице, понятно, не применяется. В общем все никак. Помогите, пожалуйста

9 ответов 9

А на самом деле для кросс-браузерности вот так:):

Хотя наверно мой ответ уже неактуален.

Насколько я помню, проблема глубже чем расстановка вендерных префиксов. border-radius конфликтует с border-collapse: collapse , которое, скорее всего используется. Я решал это двумя способами:

1. отказаться от border-collapse: collapse , а бордюры внутри таблицы рисовать ячейкам. Скажежм правый и нижний, а добивать first-child`ами.
2. не отказываться от border-collapse: collapse , но отказываться от вненего бордюра таблицы. Таблицу помещать в div. div`у рисовать бордюр и скруглять его.

P.S. Правда сейчас повторить не удается проблему 🙂

Если ты пробуешь сделать в Internet Explorer у тебя ничего не выйдет. В нем нужно использовать картинки — а в других браузерах должно работать как написано ниже. Прямо в теге прописан стиль:

  
 
 
ID
 
Название
 
Цена
 
Цвета
 
Продажи
 
 
 
 
1
 
Name
 
50$
 
Black, White
 
104
 
 
2
 
Name
 
70$
 
Red, Blue, Grey
 
255
 
 
 
 

И стиль прописан в классе:

 .table_block 
 
 
ID
 
Название
 
Цена
 
Цвета
 
Продажи
 
 
 
 
1
 
Name
 
50$
 
Black, White
 
104
 
 
2
 
Name
 
70$
 
Red, Blue, Grey
 
255
 
 
 
 

Источник