Border table border radius: css3 — Почему не работает свойство border-radius top,right,left.bottom в FireFox у таблицы?

Содержание

border-collapse | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчанию separate
НаследуетсяНет
ПрименяетсяК тегу <table> или к элементам, у которых значение display установлено как table или inline-table
Ссылка на спецификацию http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse

Версии CSS

Описание

Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

аб

Рис. 1. Вид таблицы при использовании свойства border-collapse

Синтаксис

border-collapse: collapse | separate | inherit

Значения

collapse
Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing.
separate
Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    border: 4px double black; /* Рамка вокруг таблицы */
    border-collapse: collapse; /* Отображать только одинарные линии */
   }
   th { 
    text-align: left; /* Выравнивание по левому краю */
    background: #ccc; /* Цвет фона ячеек */
    padding: 5px; /* Поля вокруг содержимого ячеек */
    border: 1px solid black; /* Граница вокруг ячеек */
   }
   td { 
    padding: 5px; /* Поля вокруг содержимого ячеек */
    border: 1px solid black; /* Граница вокруг ячеек */
   }
  </style>
 </head>
 <body>   
  <table>
   <tr> 
    <th>&nbsp;</th><th>2013</th>
    <th>2014</th><th>2015</th>
   </tr>
   <tr> 
    <td>Нефть</td><td>43</td>
    <td>51</td><td>79</td>
   </tr>
   <tr> 
    <td>Золото</td><td>29</td>
    <td>34</td><td>48</td>
   </tr>
   <tr> 
    <td>Дерево</td><td>38</td>
    <td>57</td><td>36</td>
   </tr>
  </table> 
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Вид таблицы при использовании свойства border-collapse

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. В IE6 и IE7 не отменяется действие атрибута cellspacing.

как работать с полями, границами и свойством z-index

Ещё несколько лет назад фронтенд-разработчики активно использовали табличную вёрстку для создания веб-страниц. Сегодня появились более удобные инструменты, а тег <table> теперь применяется по прямому назначению: для создания таблиц с данными. Однако оформлять таблицы по-прежнему не так просто. Некоторые CSS-свойства, например,

margin, border-radius, z-index, не работают с элементами таблиц <tbody>, <thead>, <tr>. Статья поможет обойти эти ограничения.

Структура таблицы

Эталонный вариант таблицы


Иллюстрация выше показывает, как можно оформить таблицу с помощью CSS. Первый ряд выступает в качестве заголовка, а разделы таблицы обозначены подзаголовками.

<table>
  <thead>
    <tr>
      <th>MO</th>
      <th>TU</th>
      <th>WE</th>
      <th>TH</th>
      <th>FR</th>
      <th>SA</th>
      <th>SU</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="7">
        Working hours
      </th>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="7">
        Workout
      </th>
    </tr>
    <tr>
      <td>0.5</td>
      <td>0.5</td>
      <td>0.5</td>
      <td>1</td>
      <td>0.5</td>
      <td>2</td>
      <td>0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="7">
        Total
      </th>
    </tr>
    <tr>
      <td>8.5</td>
      <td>8.5</td>
      <td>9.5</td>
      <td>10</td>
      <td>5.5</td>
      <td>2</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

Выше представлена структура таблицы в HTML. В

<thead> содержится главное название. В таблице есть несколько секций <tbody>, каждая из которых имеет собственный подзаголовок.

Что не так с

margin и как оформить отступы для элементов таблицы

Как видно на иллюстрации в начале статьи, между главным заголовком и секцией <tbody>, а также между остальными секциями <tbody>, есть отступы. Можно подумать, что они определяются свойствами margin-top для <tbody>, но это не так.

Если попытаться использовать margin-top для оформления <tbody>, <thead> или <tr>, добиться отступов не удастся. Чтобы margin заработали, можно изменить свойство display, которое менять опасно, так как изменения могут нарушить форматирование таблицы. Поэтому лучше воспользоваться альтернативными решениями, которые описаны ниже.

Свойство

border

Самый простой способ получить отступы без использования

margin — применить к <tbody> border-top: 1 em.

// Это нужно, чтобы работал border-top
.table {
  border-collapse: collapse; // 1
  border-spacing: 0;
}

.section {
  border-top: 1em solid transparent;
}

Все секции <tbody>, у которых должны быть отступы, имеют класс .section. Чтобы свойство border-top сработало, необходимо применить к таблице border-collapse: collapse.

Псевдоэлементы

::before и ::after

Псевдоэлементы ::before и ::after — ещё один способ добавить отступы для элементов таблицы.

.section::before {
  height: 1em;
  display: table-row;
  content: '';
}

В данном случае создаётся пустой ряд, который обеспечивает визуальный отступ между секциями <tbody>.

Вы можете использовать для оформления отступов как псевдоэлементы, так и свойство border.

Как применить к элементам таблицы

border-radius

Задача: добавить к секциям <tbody> границы и применить к ним border-radius. Напрямую это сделать невозможно — border и border-radius не работают с <tbody>.

// 1. Приходится использовать свойство box-shadow
//    border-radius не работает с <tbody>.
.section-step {
  border-radius: 0.25em; // 1
  box-shadow: 0 0 0 1px #ccc; // 1
}

Пример выше показывает, как с помощью box-shadow добиться практически такого же результата, как с помощью border при работе с нетабличными элементами.

Как оформлять ячейки таблицы

Внешний вид текущей таблицы (см. иллюстрацию ниже) отличается от эталонного варианта, который представлен в начале статьи.

Нужны марджины, а не паддинги


После добавления границ можно заметить, что полученные отступы работают не как «марджины», а как «паддинги». Это можно изменить, если работать с границами ячеек и использовать селекторы

:first-child и :last-child.

.section-step th,
.section-step td {
  border: 0 solid #ccc;
}

.section-step th:first-child,
.section-step td:first-child {
  border-left-width: 1px;
}

.section-step th:last-child,
.section-step td:last-child {
  border-right-width: 1px;
}

.section-step tr:first-child th,
.section-step tr:first-child td {
  border-top-width: 1px;
}

.section-step tr:first-child th:first-child,
.section-step tr:first-child td:first-child {
  border-top-left-radius: 0.25em;
}

.section-step tr:first-child th:last-child,
.section-step tr:first-child td:last-child {
  border-top-right-radius: 0.25em;
}

.section-step tr:last-child th,
.section-step tr:last-child td {
  border-bottom-width: 1px;
}

.section-step tr:last-child th:first-child,
.section-step tr:last-child td:first-child {
  border-bottom-left-radius: 0.25em;
}

.section-step tr:last-child th:last-child,
.section-step tr:last-child td:last-child {
  border-bottom-right-radius: 0.25em;
}

В примере выше стили применяются к соответствующим элементам th и td ячеек таблицы. К ячейкам, которые находятся в углах таблицы, применяется border-radius. Все ячейки, которые находятся по краям таблицы, имеют границы. Селекторы :first-child и :last-child позволяют обращаться к нужным ячейкам.

Как применять

z-index к элементам таблицы

Проблемы с box-shadow


На первой иллюстрации в статье видно, что свойство box-shadow применяется к подзаголовкам, поэтому тени попадают на следующие ниже ряды таблицы. Если попробовать прямо применить box-shadow к соответствующему элементу, тень в рядах не появится.

В обычной ситуации можно использовать для решения таких проблем z-index. Но с таблицами всё сложнее: z-index не работает с <tbody>. Проблема решается, если вы знаете, как работать с контекстом наложения. Если применить к элементу

position: relative и z-index, появляется новый контекст наложения. Также эту задачу можно решить с помощью transform: translate (0, 0).

Заключение

Чтобы сделать таблицы визуально привлекательными, приходится использовать неочевидные трюки CSS. Но этим и хороши CSS — с их помощью можно решить практически любую задачу по оформлению веб-элементов.

При работе с таблицами возникает соблазн переопределить свойство display. Но это приведёт к дополнительным сложностям: придётся вручную определять ширину ячеек, чтобы таблица нормально отображалась. Поэтому удобнее пользоваться предложенными выше трюками, которые позволяют оформлять таблицы элегантно и без лишнего кода.

Адаптированный перевод статьи Styling HTML Tables: How to Apply Margins, Borders and z-index on Table Elements by Markus Oberlehner. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».

CSS свойство border-radius | назначение, допустимые значения, примеры

Свойство border-radius — сокращенный способ задать свойства границы border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, позволяет задать одновременно радиус скруглений всех углов элемента.

Допустимые значения

  • — точное значение радиуса (не может быть отрицательным)
  • — значение радиуса в процентах.

Есть возможность задать несколько радиусов для разных углов. Если задано два радиуса, первый означает радиус скругления левого верхнего и правого нижнего углов, а второй — правого верхнего и левого нижнего углов. Если задано три числа, тогда первое — левый верхний угол, второе — правый верхний и левый нижний углы, а третье — правый нижний угол.

Можно задать эллиптические радиусы используя слеш. Значение до слеша — радиусы по оси х, а после слеша — радиусы по оси у.

Если значения указаны в процентах, то значение радиуса по оси х отсчитывается в процентах от ширины блока, а значение радиуса по оси у — от высоты блока.

Значение по умолчанию 0
Применимо ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’.
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

.block {
border-radius: 10px/20%;
border: 1px solid #000;
}

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— .block { width: 80%; height: 50%; background: #3490fb; color: #000; border: 2px solid #f00; border-radius: 40px 30px 60px / 20px 10%; } —> </style> </head> <body> <div> блок со скругленными уголками (работает в Opera 10.5 и выше). </div> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Safari 3 и выше и Chrome 1 и выше поддерживают аналогичное свойство -webkit-border-radius, а Firefox 1.0 и выше -moz-border-radius, но эти свойства не полностью соответствуют спецификации. В частности, -webkit-border-radius не поддерживает значения радиусов, заданные в процентах, а -moz-border-radius рассчитывает радиус по оси y в процентах от ширины блока, а не от высоты, как в спецификации. Возможность задать эллиптические радиусы через пробел поддерживается в Safari 3 и Chrome 1 и выше и в Firefox 3.5 и выше. Также в свойстве -webkit-border-radius отсутствует возможность указать разные значения радиуса для разных углов. Для этого приходится для каждого угла указывать радиус отдельно.

Свойство border-right Свойство border-left-width

Как добавить границу в HTML-таблицу

Чтобы добавить границу в HTML

, вам сначала нужно знать, как создать HTML-таблицу. В HTML вы можете создавать таблицы, используя тег
вместе с тегами ,
и .

Узнайте, как создать таблицу HTML здесь.

Создание границы для таблицы HTML¶

После создания таблицы HTML вы должны добавить к ней границу, поскольку по умолчанию границы не добавляются. Во-первых, давайте посмотрим на пример, в котором мы используем атрибут границы HTML.

Пример создания HTML-таблицы с атрибутом border: ¶

  

  
     Название документа 
  
  
    
Человек Возраст
Энн 19
Сьюзи 22
Попробуйте сами »

Результат¶

Человек Возраст
Ann 19
Susie 22

В любом случае, мы рекомендуем использовать свойство CSS border для добавления границы к вашим таблицам.Чтобы добавить границу к вашей таблице, вам нужно определить <таблица>

Человек Возраст
Энн 19
Сьюзи 22
Попробуйте сами »

Как изменить стиль границы таблицы HTML с помощью CSS¶

Вы можете придать стиль своей таблице, используя сокращенное свойство CSS border или border-width, border-style, border- свойства цвета, отдельно.См. Пример ниже, чтобы получить видимый результат этих свойств.

Пример изменения стиля границы таблицы HTML с помощью CSS: ¶

  

  
     Название документа 
    <стиль>
      Таблица {
        бордюрный стиль: гребень;
        ширина границы: 150 пикселей;
        цвет границы: # 8ebf42;
        цвет фона: # d9d9d9;
      }
      th {
        граница: 5px solid # 095484;
      }
      td {
        граница: углубление 20px # 1c87c9;
      }
    
  
  
    <таблица>
      
         Человек 
         Возраст 
      
      
         Энн 
         19 
      
      
         Сьюзи 
         22 
      
    
  
  
Попробуйте сами »

Если вы не хотите, чтобы граница охватывала всю таблицу (или если вам нужны разные границы с каждой стороны таблицы), вы можете использовать любое из следующих свойств: border -top, border-right, border-bottom и border-left.

Пример добавления нижних границ в HTML-таблицу: ¶

  

  
     Название документа 
    <стиль>
      Таблица {
        граница-коллапс: коллапс;
      }
      тд,
      th {
        отступ: 10 пикселей;
        нижняя граница: 2px solid # 8ebf42;
        выравнивание текста: центр;
      }
    
  
  
    <таблица>
      
         Человек 
         Возраст 
      
      
         Энн 
         19 
      
      
         Сьюзи 
         22 
      
    
  
  
Попробуйте сами »

Как получить скругленные границы¶

Вы также можете скруглить границы, используя свойство CSS border-radius.Помните, что в этом случае вы должны удалить свойство border-collapse для правильной работы. Давайте посмотрим на пример, в котором все элементы таблицы округлены.

Пример добавления закругленных границ к HTML-таблице: ¶

  

  
     Название документа 
    <стиль>
      Таблица,
      тд,
      th {
        отступ: 10 пикселей;
        граница: 2px solid # 1c87c9;
        радиус границы: 5 пикселей;
        цвет фона: # e5e5e5;
        выравнивание текста: центр;
      }
    
  
  
    <таблица>
      
         Человек 
         Возраст 
      
      
         Энн 
         19 
      
      
         Сьюзи 
         22 
      
    
  
  
Попробуйте сами »

Как добавить рамку к элементам

,

или

Таким же образом вы можете добавить рамку к другим элементам HTML.Давайте посмотрим на пример добавления границ к элементам

,

и

.

Пример добавления границ к элементам

,

и

: ¶
  

  
     Название документа 
    <стиль>
      h3,
      div,
      п {
        отступ: 10 пикселей;
      }
      h3 {
        граница: 3px двойной # 1c87c9;
        цвет фона: # d9d9d9;
      }
      div {
        граница слева: 5px solid # 1c87c9;
        цвет фона: #cccccc
      }
      п {
        граница: канавка 10px # 8ebf42;
      }
    
  
  
     

Пример границы

Пример Div для свойства границы.

Какой-то абзац с рамкой.

Попробуйте сами »

Если вы хотите, чтобы границы абзацев были закругленными, следуйте приведенному ниже примеру, чтобы узнать, как это сделать. Используйте свойство border-radius, чтобы получить желаемый результат.

Пример создания закругленных границ на абзацах: ¶

  

  
     Название документа 
    <стиль>
      п {
        отступ: 10 пикселей;
      }
      п.обычный {
        граница: 2px solid # 1c87c9;
      }
      p.round1 {
        граница: 2px solid # 1c87c9;
        радиус границы: 5 пикселей;
      }
      p.round2 {
        граница: 2px solid # 1c87c9;
        радиус границы: 8 пикселей;
      }
      p.round3 {
        граница: 2px solid # 1c87c9;
        радиус границы: 12 пикселей;
      }
    
  
  
     

Закругленные границы

Нормальная граница

Круглая граница

Круглая граница

Круглая граница

Попробуйте сами »

Радиус границы на пуленепробиваемой кнопке> Litmus

Как я могу добавить радиус границы к этому коду кнопки?

 
  
                                
                                    
                                    

border-radius · Документы WebPlatform

Сводка

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

Обзорная таблица

Начальное значение
0
Относится к
Все элементы, кроме элемента таблицы, когда border-collapse свернут
Унаследовано
Нет
Медиа
визуальный
Расчетное значение
Как указано в отдельных свойствах
Анимационный
Да
Свойство объектной модели CSS
граница Radius
В процентах
См. Соответствующий размер (ширину или высоту) рамки.

Синтаксис

  • граница-радиус: длина
  • граница-радиус: длина / длина
  • border-radius: процент
  • border-radius: процент / процент

Значения

длина
Обозначает размер радиуса круга или горизонтального и вертикального радиусов для эллиптических кривых. Он может быть выражен в любых единицах, разрешенных в типах данных CSS .Единицы em полезны для элементов управления, масштабируемых пропорционально размеру шрифта. Относительные единицы области просмотра (vw, vh, vmin, vmax) могут быть полезны для элементов управления, которые масштабируются с размером области просмотра. Отрицательные значения недопустимы. Вы можете указать одну длину для всех четырех углов или две, три или четыре длины, чтобы указать разную длину для разных углов: дополнительные сведения см. В разделе синтаксиса.
процент
Обозначает размер радиуса угла в процентах от размеров рамки.В частности, проценты по горизонтальной оси относятся к ширине рамки, а проценты по вертикальной оси относятся к высоте рамки рамки. Отрицательные значения недопустимы. Вы можете указать один процент для всех четырех углов или два, три или четыре процента, чтобы указать разные проценты для разных углов: более подробную информацию см. В разделе синтаксиса.
длина / длина
Указание двух наборов значений длины, разделенных косой чертой, приравнивается к указанию отдельных длин для радиусов X и Y углов, что приводит к эллиптическим углам, если радиусы X и Y имеют разную длину.Каждый набор может состоять из одного, двух, трех или четырех значений.
процент / процент
Указание двух наборов процентных значений, разделенных косой чертой, приравнивается к указанию отдельных процентов для радиусов X и Y углов, что приводит к эллиптическим углам, если радиусы X и Y имеют проценты, приводящие к различным вычисленным значениям (в зависимости от ширины и высота элемента, разные проценты могут привести к одним и тем же вычисленным значениям; подробнее см. в разделе примечаний).Каждый набор может состоять из одного, двух, трех или четырех значений.

Примеры

Пример одного значения

  border-radius: 1em;



граница-верхний-левый-радиус: 1em;
граница-верх-правый-радиус: 1em;
граница-нижний-правый-радиус: 1em;
граница-нижний-левый-радиус: 1em;
  

Посмотреть живой пример

Пример нескольких значений

  border-radius: 20px 1em 1vw / 0.5em 3em;

/* эквивалентно: */

граница-верх-левый-радиус: 20px 0.5em;
граница-верх-правый-радиус: 1em 3em;
граница-нижний-правый-радиус: 1vw 0.5em;
граница-нижний-левый-радиус: 1em 3em;
  

Посмотреть живой пример

Создайте эллипс, если только

  радиус границы: 50%;


  

Посмотреть живой пример

Кривые усадки во избежание перекрытия

  радиус границы: 100% 150%;



радиус границы: 40% 60%;


  

Посмотреть живой пример

Использование

  Как и в случае любого сокращенного свойства, индивидуальные унаследованные значения невозможны, то есть border-radius: 0 0 inherit inherit, которое частично переопределяет существующие определения.В этом случае необходимо использовать отдельные свойства от руки.
  

Синтаксис

border-radius может принимать от одного до четырех значений:

  • одно значение будет применено ко всем четырем углам
  • два значения будут применены к верхнему левому + нижнему правому и верхнему правому + нижнему левому соответственно
  • три значения будут применены к верхнему левому, верхнему правому + нижнему левому и нижнему правому соответственно
  • четыре значения будут применены к четырем углам отдельно, в следующем порядке: верхний левый, верхний правый, нижний правый, нижний левый

Банкноты

Замечания

  • Свойство border-radius является составным свойством, которое определяет до четырех свойств border - * - radius .Если значения указаны до и после косой черты, значения перед косой чертой задают горизонтальный радиус, а значения после косой черты задают вертикальный радиус. Если нет косой черты («/»), значения устанавливают оба радиуса одинаково. Четыре значения для каждого радиуса даны в порядке по часовой стрелке, начиная с верхнего левого угла. Если указано менее четырех значений, они повторяются до тех пор, пока мы не получим четыре значения, аналогично другим свойствам CSS, таким как border-width.
  • Можно получить эллиптические углы, даже указав один радиус.Это происходит, когда вы используете проценты, поскольку они разрешаются к разному числу для каждой оси (по горизонтали это проценты от ширины рамки, по вертикали от высоты). Для демонстрации см. Пример эллипса выше (пример № 3)
  • Поскольку border-radius округляет рамку границы элемента, внутренние углы (padding box) будут иметь меньшие радиусы (в частности, border-radius - border-width) или даже не закругляться, если граница толще, чем border-radius значение.Другим следствием этого является то, что при разной ширине границ на смежных сторонах изгибы поля заполнения будут эллиптическими.
  • Обратите внимание, что хотя в сокращении border-radius есть косая черта (/) для отделения горизонтальных радиусов от вертикальных, они разделены пробелом в длинных частях.

Связанные спецификации

Модуль CSS Backgrounds and Borders Уровень 3: Закругленные углы:
Кандидат в рекомендации
Модуль CSS Backgrounds and Borders Уровень 4: Закругленные углы:
Проект редакции

См. Также

Статьи по теме

Граница

Связанные страницы

Атрибуции

Граница

В шаблоне любого типа блоки, таблицы и ячейки таблицы, абзацы, изображения и другие элементы могут иметь границу.

Элементы имеют прямоугольную форму, поэтому их граница имеет четыре стороны. Каждая сторона границы может иметь разный макет.

Добавление границы

  1. Щелкните элемент правой кнопкой мыши и выберите соответствующий элемент в контекстном меню.
    Или выберите элемент (см. Выбор элемента) и в меню «Формат» щелкните соответствующий элемент.
  2. Щелкните вкладку Граница.
  3. Снимите отметку с опции Одинаково для всех сторон, чтобы иметь возможность стилизовать каждую сторону границы отдельно.
  4. Укажите ширину границы (стороны). Это эквивалентно свойству border-width в CSS.
  5. Укажите стиль границы (стороны), например сплошную, пунктирную или пунктирную. Это эквивалентно свойству стиля границы в CSS.
  6. Укажите цвет границы (стороны): выберите именованный цвет (определенный в свойствах цветов) из раскрывающегося списка или щелкните цветной квадрат, чтобы открыть диалоговое окно «Палитра цветов» («Палитра цветов»).В качестве альтернативы вы можете ввести имя или значение непосредственно в поле «Цвет». Это должно быть предопределенное имя цвета CSS (названия цветов CSS), шестнадцатеричный код цвета (HTML Hex Color), значение цвета RGB, например rgb (216,255,170) , или значение цвета CMYK, например cmyk (15% , 0%, 33%, 0%) .
    Этот параметр эквивалентен свойству border-color в CSS.

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

Любой элемент в шаблоне может иметь закругленные углы.Для блоков и изображений этот параметр доступен в диалоговом окне «Форматирование». Для других элементов вы должны создать правило CSS, чтобы установить радиус границы элемента (или класса элементов).

Коробки, изображения и таблицы

Для закругления углов коробки, изображения или стола:

  1. Выберите элемент «Коробка», «Изображение» или «Таблица» (см. «Выбор элемента») и в меню «Формат» щелкните соответствующий элемент.Или щелкните элемент правой кнопкой мыши и выберите соответствующий элемент в контекстном меню.
  2. На первой вкладке диалогового окна «Форматирование» (вкладка «Рамка», «Изображение» или «Таблица» соответственно) укажите радиус угла в единицах измерения (10 мм, 5 пикселей, 0,5 дюйма) или в процентах (0–90%).
  3. Для окна или изображения нажмите «Применить», чтобы увидеть эффект, не закрывая диалоговое окно, или «ОК», чтобы закрыть диалоговое окно.

Для таблицы вам нужно сделать еще один шаг.Таблицы не могут иметь закругленные углы и свернутые границы одновременно. Все встроенные стили таблиц в конструкторе имеют свернутые границы. Чтобы скругленные углы отображались, необходимо создать правило CSS, которое устанавливает для свойства border-collapse таблицы значение , отдельный вместо collapse .

  1. Нажмите кнопку «Дополнительно» в нижней части диалогового окна «Форматирование».
  2. В разделе "Свойство" введите border-collapse.
  3. В поле «Значение» введите отдельный.
  4. Добавьте заполнение, чтобы ячейки таблицы не выступали за скругленные углы: в разделе «Заполнение типа свойства» и в разделе «Тип значения» укажите меру заполнения.
  5. Нажмите «ОК», затем снова нажмите «ОК», чтобы закрыть диалоговое окно «Форматирование».

Если скругленные углы таблицы все еще не видны (полностью), проверьте стили для ячеек таблицы.Ячейки таблицы могут иметь собственный цвет фона и тем самым скрывать цвет фона таблицы, включая закругленные углы. Ячейки таблицы могут иметь закругленные углы, как и любые другие элементы; см. ниже.

Прочие элементы

Чтобы скруглить углы элементов, отличных от прямоугольников и изображений, или иметь разные закругления на разных углах, вы должны использовать свойство CSS: border-radius ; см. https: // www.w3schools.com/css/css3_borders.asp.

Вот, например, как можно закруглить углы абзаца:

  1. Выделите абзац (см. Раздел «Выбор элемента»), а затем выберите в меню «Формат»> «Абзац» или щелкните правой кнопкой мыши абзац и выберите «Абзац» в контекстном меню.
  2. Нажмите кнопку «Дополнительно» в нижней части диалогового окна «Форматирование».
  3. В разделе "Свойство" введите радиус границы.
  4. В поле «Значение» введите значение радиуса угла в единицах измерения (10 мм, 5 пикселей, 0,5 дюйма) или в процентах (0–90%).
  5. Нажмите «ОК», затем снова нажмите «ОК», чтобы закрыть диалоговое окно «Форматирование».
Использование файла CSS

Конечно, вы также можете добавить это правило в файл CSS; см. Шаблоны стилей с помощью файлов CSS. Следующее правило устанавливает радиус границы углов всех абзацев равным 5 пикселям: p {border-radius: 5px; } .
Чтобы применить это правило к одному конкретному абзацу, сначала присвойте абзацу идентификатор (выберите абзац и введите идентификатор, например, с округлением, на панели «Атрибуты»). Затем добавьте идентификатор к правилу CSS, например p # rounded {border-radius: 5px; } .
Чтобы правило CSS применялось к набору абзацев одного класса, сначала присвойте абзацам один и тот же класс (например, с округлением). Затем добавьте этот класс в селектор правила CSS, например p.ounded {border-radius: 5px; } .

Border Radius - Tailwind CSS

round-none border-radius: 0px;
с закругленными углами радиус границы: 0,125 бэр;
закруглено радиус границы: 0,25 бэр;
закругленная граница радиуса: 0,375 бэр;
округлый lg радиус границы: 0,5 бэр;
закругленный xl радиус границы: 0.75рем;
закругленный 2xl радиус границы: 1 rem;
закругленное 3xl радиус границы: 1,5 бэр;
с закругленными краями border-radius: 9999px;
закругленный т-нет граница-верхний-левый-радиус: 0 пикселей; граница-верх-правый-радиус: 0 пикселей;
закругленный t-sm граница, верхний левый радиус: 0,125 бэр; граница-верх-правый-радиус: 0,125 бэр;
закругленная граница-верх-левый-радиус: 0.25рем; граница-верх-правый-радиус: 0,25 бэр;
закругленный t-md граница-верх-левый-радиус: 0,375 бэр; граница-верх-правый-радиус: 0,375 бэр;
закругленный t-lg край-верх-левый радиус: 0,5 бэр; граница-верх-правый-радиус: 0,5 бэр;
закругленный-t-xl граница-верх-левый-радиус: 0,75 бэр; граница-верх-правый-радиус: 0,75 бэр;
закругленный-t-2xl граница-верхний-левый-радиус: 1бэр; граница-верх-правый-радиус: 1 бэр;
закругленный-t-3xl граница-верх-левый-радиус: 1.5рем; граница-верх-правый-радиус: 1,5 бэр;
закругленный-полный граница-верх-левый-радиус: 9999 пикселей; граница-верх-правый-радиус: 9999 пикселей;
закругленный-r-none border-top-right-radius: 0px; граница-нижний-правый-радиус: 0px;
закругленный-r-sm граница-верх-правый-радиус: 0,125 бэр; граница-нижний-правый-радиус: 0,125 бэр;
с закругленными углами граница, верхний правый радиус: 0,25 бэр; граница-нижний-правый-радиус: 0.25рем;
с закругленными углами граница, верхний правый радиус: 0,375 бэр; граница-нижний-правый-радиус: 0,375 бэр;
закругленный-r-lg край-верх-правый-радиус: 0,5 бэр; граница-нижний-правый-радиус: 0,5 бэр;
закругленный-r-xl граница-верх-правый-радиус: 0,75 бэр; граница-нижний-правый-радиус: 0,75 бэр;
закругленный-r-2xl граница-верх-правый-радиус: 1 бэр; граница-нижний-правый-радиус: 1бэр;
закругленный-r-3xl граница-верх-правый-радиус: 1.5рем; граница-нижний-правый-радиус: 1,5 бэр;
закругленный-полный граница-верх-правый-радиус: 9999 пикселей; граница-нижний-правый-радиус: 9999 пикселей;
закругленный-б-нет граница-нижний-правый-радиус: 0px; граница-нижний-левый-радиус: 0 пикселей;
закругленный-b-sm край-нижний правый-радиус: 0,125 бэр; граница-нижний-левый-радиус: 0,125 бэр;
закругленный-b край-нижний правый-радиус: 0,25 бэр; граница-нижний-левый-радиус: 0.25рем;
закругленный-b-md край-нижний правый-радиус: 0,375 бэр; граница-нижний-левый-радиус: 0,375 бэр;
закругленный-b-lg край-нижний правый-радиус: 0,5 бэр; граница-нижний-левый-радиус: 0,5 бэр;
закругленный-b-xl край-нижний правый-радиус: 0,75 бэр; граница-нижний-левый-радиус: 0,75 бэр;
закругленный-b-2xl край-нижний правый-радиус: 1бэр; граница-нижний-левый-радиус: 1бэр;
закругленный-b-3xl граница-нижний-правый-радиус: 1.5рем; граница-нижний-левый-радиус: 1,5 бэр;
закругленный-b-полный граница-нижний-правый-радиус: 9999 пикселей; граница-нижний-левый-радиус: 9999 пикселей;
закругленный-l-нет граница-верх-левый-радиус: 0 пикселей; граница-нижний-левый-радиус: 0 пикселей;
закругленный l-sm граница-верх-левый-радиус: 0,125 бэр; граница-нижний-левый-радиус: 0,125 бэр;
закругленное l граница, верхний левый радиус: 0,25 бэр; граница-нижний-левый-радиус: 0.25рем;
закругленный l-md граница-верх-левый-радиус: 0,375 бэр; граница-нижний-левый-радиус: 0,375 бэр;
закругленный l-lg край-верх-левый радиус: 0,5 бэр; граница-нижний-левый-радиус: 0,5 бэр;
закругленный-l-xl граница-верх-левый-радиус: 0,75 бэр; граница-нижний-левый-радиус: 0,75 бэр;
закругленный-l-2xl граница-верх-левый-радиус: 1бэр; граница-нижний-левый-радиус: 1бэр;
закругленный-l-3xl граница-верх-левый-радиус: 1.5рем; граница-нижний-левый-радиус: 1,5 бэр;
закругленный-l-полный border-top-left-radius: 9999px; граница-нижний-левый-радиус: 9999 пикселей;
закругленный tl-none граница-верх-левый-радиус: 0 пикселей;
закругленный tl-sm граница-верх-левый-радиус: 0,125 бэр;
закругленный tl граница, верхний левый радиус: 0,25 бэр;
Round-TL-MD border-top-left-radius: 0.375rem;
закругленный tl-lg граница-верх-левый-радиус: 0.5рем;
закругленный tl-xl граница-верх-левый-радиус: 0,75 бэр;
закругленный-tl-2xl граница-верх-левый-радиус: 1 бэр;
закругленный-tl-3xl граница-верх-левый-радиус: 1,5 бэр;
Round-TL-Full border-top-left-radius: 9999px;
закругленный tr-none border-top-right-radius: 0px;
закругленный tr-sm граница-верх-правый-радиус: 0.125rem;
закругленный угол граница, верхний правый радиус: 0,25 бэр;
закругленный tr-md граница, верхний правый радиус: 0,375 бэр;
закругленный tr-lg граница, верхний правый радиус: 0,5 бэр;
round-tr-xl border-top-right-radius: 0,75 rem;
закругленный-tr-2xl граница-верх-правый-радиус: 1 бэр;
закругленный tr-3xl граница-верх-правый-радиус: 1.5рем;
закругленный tr-полный border-top-right-radius: 9999px;
округленный-br-нет граница-нижний-правый-радиус: 0px;
закругленный br-sm край-нижний правый-радиус: 0,125 бэр;
с закругленными углами граница, нижний правый радиус: 0,25 бэр;
закругленный br-md край-нижний правый-радиус: 0,375 бэр;
закругленный-br-lg граница-нижний-правый-радиус: 0.5рем;
round-br-xl border-bottom-right-radius: 0.75rem;
закругленный-br-2xl край-нижний-правый-радиус: 1бэр;
закругленный-br-3xl край-нижний-правый-радиус: 1,5 бэр;
закругленный-полный граница-нижний-правый-радиус: 9999 пикселей;
закругленный-черный-нет граница-нижний-левый-радиус: 0 пикселей;
round-bl-sm border-bottom-left-radius: 0.125rem;
округлый черный граница, нижний левый, радиус: 0,25 бэр;
round-bl-md border-bottom-left-radius: 0.375rem;
round-bl-lg border-bottom-left-radius: 0.5rem;
round-bl-xl border-bottom-left-radius: 0.75rem;
закругленный-bl-2xl граница-нижний-левый-радиус: 1бэр;
round-bl-3xl border-bottom-left-radius: 1.5рем;
round-bl-full border-bottom-left-radius: 9999px;

Система веб-дизайна США (USWDS)

.border-transparent прозрачный

.окаймляющий черный # 000000

.border-белый #ffffff

.граница-база-самый светлый серый-5 # f0f0f0

.border-base-зажигалка серый прохладный-10 # dfe1e2

.бордюрный фонарь серый прохладный-30 # a9aeb1

.border-base серый прохладный-50 # 71767a

.граница-основание-темное серый прохладный-60 # 565c65

.border-base-темнее серый прохладный-70 # 3d4551

.граница-основание-самый темный серый-90 # 1b1b1b

.border-ink серый-90 # 1b1b1b

.граница первичной зажигалки синий-10 # d9e8f6

.border-primary-light синий-30 # 73b3e7

.погранично-первичный синий-60в # 005ea2

.border-первичный-яркий синий-теплый-60в # 0050d8

.граница-первичный-темный синий-теплый-70в # 1a4480

.border-primary-darker синий-теплый-80в # 162e51

.граница вторичной зажигалки красный прохладный-10в # f8dfe2

.border-вторичный свет красный-30 # f2938c

.погранично-вторичный красный-50 # d83933

.border-вторичный-яркий красный холодный 50в # e41d3d

.граница вторичного темного красный-60в # b50909

.border-вторичный-темнее красный-70в # 8b0a03

.граница-акцент-прохладно-зажигалка синий прохладный-5в # e1f3f8

.border-accent-cool-светлый синий прохладный-20в # 97d4ea

.граница-акцент-круто голубой-30в # 00bde3

. границы-акцент-прохладно-темный синий холодный 40в # 28a0cb

.граница-акцент-прохладно-темнее синий холодный 60в # 07648d

.border-accent-теплая-зажигалка оранжевый-10 # f2e4d4

.бордюр-акцент-теплый-свет оранжевый-20в # ffbc78

. границы-акцент-теплый оранжевый-30в # fa9441

.бордюр-акцент-теплый-темный оранжевый-50в # c05600

. границы-акцент-теплый-темнее оранжевый-60 # 775540

.пограничная чрезвычайная ситуация красный-теплый-60в # 9c3d10

.border-Emergency-темный красный-теплый-80 # 332d29

.кайма-белый #ffffff

.border-серый-5 # f0f0f0

.бордюр-серый-10 # e6e6e6

.border-серый-30 #adadad

.бордюр-серый-50 # 757575

.border-серый-70 # 454545

.бордюр-серый-90 # 171717

.border-черный # 000000

.кайма красный красный-50в # e52207

.border-оранжевый оранжевый-40в # e66f0e

.бордюр-золото золото-20в # ffbe2e

. Border-желтый желтый-10в # fee685

.кайма-зеленый зеленый-50в # 538200

.border-мята мята-30в # 04c585

.бордюр-голубой циан-40в # 009ec1

.border-синий синий-50в # 0076d6

.бордюр-индиго индиго-50 # 676cc8

. Border-фиолетовый фиолетовый-50 # 8168b3

.погранично-пурпурный пурпурный-50v # d72d79

Скругленные края стола (Microsoft Word)

Робин ищет способ создать таблицу с закругленными краями за пределами таблицы. Невозможно сделать это непосредственно в Word (таблицы с включенными границами, используйте квадратные углы по внешним краям), но есть обходной путь, который будет работать с таблицами, которые не выходят за нижнюю часть страницы.

Начните с создания таблицы, как обычно. Затем вы можете настроить границы таблицы так, чтобы внутренние границы ячеек были такими, как вы хотите, но на таблице не было внешней границы. Затем используйте инструменты рисования в Word (доступные на панели инструментов «Рисование»), чтобы нарисовать «прямоугольник с закругленными углами» вокруг стола. Вы можете настроить свойства рисованного объекта так, чтобы толщина линии была такой же, как у границ таблицы, и чтобы внутри объекта не было цвета заливки. Если вы не хотите избавляться от цвета заливки, вам нужно переместить прямоугольник так, чтобы он находился за любым текстом в документе.

Вам, вероятно, придется воспользоваться методом проб и ошибок, чтобы прямоугольник выглядел естественно с существующими границами таблицы. Вы можете убедиться, что прямоугольник имеет правильный размер и что линии на границе совпадают с линией в прямоугольнике. Вы можете увеличить коэффициент масштабирования документа до 200% или больше, чтобы лучше видеть места соприкосновения линий. Вы также можете убедиться, что линии сетки таблицы включены (отображаются только линии сетки, они не печатаются), чтобы вы могли расположить границу прямоугольника поверх линий сетки.Вы также захотите распечатать документ, чтобы увидеть, правильно ли выровнены границы таблицы и прямоугольника на распечатке.

Другой вариант - не полагаться на редактор таблиц в Word, а использовать другую программу для создания таблицы. Например, вы можете использовать Visio для создания таблицы с закругленными границами, а затем вставить объект Visio (таблицу) в свой документ.

WordTips - ваш источник экономичного обучения работе с Microsoft Word.(Microsoft Word - самая популярная программа для обработки текстов в мире.) Этот совет (424) применим к Microsoft Word 97, 2000, 2002 и 2003. Вы можете найти версию этого совета для ленточного интерфейса Word (Word 2007 и более поздних версий) здесь: Закругленные края таблицы .

Автор биографии

Аллен Вятт

Аллен Вятт - всемирно признанный автор, автор более чем 50 научно-популярных книг и многочисленных журнальных статей.Он является президентом Sharon Parq Associates, компании, предоставляющей компьютерные и издательские услуги. Узнать больше о Allen ...

Автоматическое имя файла

Есть ли у вас набор "стандартных" имен для новых документов? Если да, то вы можете быть заинтересованы в реализации техники ...

Открой для себя больше

Изменение подсказок для кнопки макроса

Хотите изменить всплывающую подсказку, которая появляется при наведении указателя мыши на инструмент на панели быстрого доступа? Вот.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *