Закругленная рамка css: Скруглённые уголки | htmlbook.ru

Рамки элементов

CSS свойства управления рамкой позволяют определять стиль, ширину и цвет рамки HTML элемента.

Рамки можно определять для большинства элементов внутри тела веб-страницы.

У меня рамка со всех сторон.

У меня красная рамка снизу.

У меня рамка с закругленными углами.

У меня синяя рамка слева.

CSS свойство border-style

Свойство border-style определяет стиль рамки.

Допустимо использовать следующие значения:

• dotted — Рамка состоит из точек
• dashed — Рамка состоит из черточек
• solid — Сплошная линия
• double — Двойная сплошная линия
• groove — 3D рамка, представляющая прорезанный желоб. Эффект зависит от значения свойства border-color
• ridge — 3D рамка, представляющая оттиснутую борозду. Эффект зависит от значения свойства border-color
• inset — 3D рамка, представляющая вдавленное углубление. Эффект зависит от значения свойства border-color
• outset — 3D рамка, представляющая выставленное возвышение. Эффект зависит от значения свойства border-color
• none — Без рамки
• hidden — Скрытая рамка

Свойство border-style может принимать от одного до четырех значений (для верхней, правой, нижней, левой рамок).

Пример

Определение различных стилей рамки:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Результат:

Рамка из точек (dotted).

Рамка из черточек (dashed).

Сплошная линия (solid).

Двойная сплошная линия (double).

Прорезанный желоб (groove). Эффект зависит от значения свойства border-color.

Оттиснутая борозда (ridge). Эффект зависит от значения свойства border-color.

Вдавленное углубление (inset). Эффект зависит от значения свойства border-color.

Выставленное возвышение (outset). Эффект зависит от значения свойства border-color.

Без рамки (none).

Скрытая рамка (hidden).

Смешанные рамки.

Внимание! НИКАКОЕ другое свойство управления рамками не будет работать пока не будет определено свойство border-style.

CSS свойство border-width

Свойство border-width определяет толщину рамки для всех четырех сторон элемента.

Толщина может задаваться в единицах измерения (px, pt, cm, em, и т. д.), либо при помощи предопределенных ключевых слов: thin, medium, thick.

В следующем примере определяется различная толщина рамок:

p.one {
  border-style: solid;
  border-width: 5px;
}
p.two {
  border-style: solid;
  border-width: medium;
}
p. three {
  border-style: dotted;
  border-width: 2px;
}
p.four {
  border-style: dotted;
  border-width: thick;
}

Результат:

medium border-width

2px border-width

thick border-width

Индивидуальная толщина рамки для каждой стороны элемента

Свойство border-width может принимать от одного до четырех значений (для верхней, правой, нижней и левой рамки).

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px верхняя и нижняя рамки, 20px по сторонам */
}
p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px верхняя и нижняя рамки, 5px по сторонам */
}
p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px верхняя, 10px правая, 4px нижняя, 35px левая */
}

CSS свойство border-color

Свойство border-color используется для определения цвета четырех рамок элемента.

Цвет можно задать как

• имя цвета — например, «red»,
• HEX значение — например, «#ff0000»,
• RGB значение — например, «rgb(255,0,0)»,
• HSL значение — например, «hsl(0,100%,50%)»,
• transparent.

Подробнее о цветах рассказывается в главе нашего учебника Как использовать цвета.

Если свойство border-color не определяется, то оно наследует цвет элемента.

В следующем примере определяется различный цвет рамок:

p.one {
  border-style: solid;
  border-color: red;
}
p.two {
  border-style: solid;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

Результат:

Красная рамка

Зеленая рамка

Синяя рамка

Индивидуальный цвет рамки для каждой стороны элемента

Свойство border-color может принимать от одного до четырех значений (для верхней, правой, нижней и левой рамки).

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red - верх, green - справа, blue - низ, yellow - слева */
}

Определение рамки для каждой стороны индивидуально

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

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

Пример:

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Результат:

Разные стили рамки

Приведенный выше пример дает такой же результат, что и следующий код:

p {
  border-style: dotted solid;
}

Вот как это работает:

Если у border-style определено четыре значения:

• border-style: dotted solid double dashed;
  • верхняя сторона рамки состоит из точек (dotted)
  • правая сторона рамки сплошная линия (solid)
  • нижняя сторона рамки двойная сплошная линия (double)
  • левая сторона рамки состоит из черточек (dashed)

Если у border-style

• border-style: dotted solid double;
  • верхняя сторона рамки состоит из точек (dotted)
  • правая и левая стороны рамки сплошная линия (solid)
  • нижняя сторона рамки двойная сплошная линия (double)

Если у border-style определено два значения:

• border-style: dotted solid;
  • верхняя и нижняя стороны рамки состоят из точек (dotted)
  • правая и левая стороны рамки сплошная линия (solid)

Если у border-style определено одно значение:

• border-style: dotted;
  • все четыре стороны рамки состоят из точек (dotted)

/* Четыре значения */
p {
  border-style: dotted solid double dashed;
}
/* Три значения */
p {
  border-style: dotted solid double;
}
/* Два значения */
p {
  border-style: dotted solid;
}
/* Одно значение */
p {
  border-style: dotted;
}

Выше мы использовали свойство border-style

p {
  border-style: solid;
  border-top-width: 10px;
  border-right-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
}

CSS свойство border. Короткая форма записи

Как вы могли заметить, для определения рамок элемента приходится иметь дело с довольно большим набором CSS свойств.

Тем не менее, чтобы уменьшить размер кода, существует возможность все эти многочисленные свойства объединить в одном CSS свойстве.

Свойство border является короткой формой записи, объединяющей воедино следующие свойства:

• border-width
• border-style (обязательно)
• border-color

Пример:

p {
  border: 5px solid red;
}

Результат:

Какой-то текст

Также, можно определять все значения рамки для отдельной стороны элемента.

Рамка слева:

p {
  border-left: 6px solid red;
}

Результат:

Какой-то текст

Рамка снизу:

p {
  border-bottom: 6px solid red;
}

Результат:

Какой-то текст

Добавьте следующий код в ваш CSS файл:

h3 {
   border-style: dashed;
   border-width: 3px;
   border-left-width: 10px;
   border-right-width: 10px;
   border-color: red;
}

Эта декларация определяет прерывистую рамку красного цвета вокруг заголовков второго уровня (элементы <h3>), у которой толщина верхней и нижней стороны будет 3 пикселя, а левой и правой — 10 пикселей (здесь 3-х пиксельная толщина рамки, определяемая в начале для всех сторон рамки, переопределяется).

CSS свойство border-radius

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

Обычная рамка

Рамка со скругленными углам

Рамка с более скругленными углам

Рамка с сильно скругленными углам

Пример:

p {
  border: 2px solid red;
  border-radius: 5px;
}

Все CSS свойства определения рамки

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

Вопрос задан 10 лет 9 месяцев назад

Изменён 2 года 1 месяц назад

Просмотрен 58k раз

    <table>
        <thead>
            <tr>
                <td>ID</td>
                <td>Название</td>
                <td>Цена</td>
                <td>Цвета</td>
                <td>Продажи</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Name</td>
                <td>50$</td>
                <td>Black, White</td>
                <td>104</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Name</td>
                <td>70$</td>
                <td>Red, Blue, Grey</td>
                <td>255</td>
            </tr>
        </tbody>
    </table>

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

• css3
• html
• html5
• css

1

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

.table_block {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  border: 1px solid #000;
  display: block;
}​

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

2

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

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

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

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

Попробуйте так:

.table_block {
  border-radius: 10px;
  border: 1px solid #000;
  display: block;
}​

Демо

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

  <table>
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Название</td>
                    <td>Цена</td>
                    <td>Цвета</td>
                    <td>Продажи</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Name</td>
                    <td>50$</td>
                    <td>Black, White</td>
                    <td>104</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Name</td>
                    <td>70$</td>
                    <td>Red, Blue, Grey</td>
                    <td>255</td>
                </tr>
            </tbody>
        </table>

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

<style type="text/css">
          . table_block{ border-radius: 15px; border-style: solid;}
</style>
  <table class ='table_block'>
        <thead>
            <tr>
                <td>ID</td>
                <td>Название</td>
                <td>Цена</td>
                <td>Цвета</td>
                <td>Продажи</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Name</td>
                <td>50$</td>
                <td>Black, White</td>
                <td>104</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Name</td>
                <td>70$</td>
                <td>Red, Blue, Grey</td>
                <td>255</td>
            </tr>
        </tbody>
    </table>

Можно ещё проще:

table{ overflow: hidden; border-radius: 6px;}

. table_block { border-radius: 10px; border: 1px solid #000; }​

Тоже столкнулся с проблемой, у меня получилось следующим образом!…
Я сделал обертку div обертку вокруг table

div {
  border: 1px solid red;
  border-radius: 5px;
}
table {
  overflow: hidden;
  border-radius: 5px;
}

border-radius: 20px; overflow: hidden;

Изменять свойство display не стоит. Зачем тогда использовать таблицу? Моё решение такое:

tbody {
    border-radius: 4px;
    box-shadow: 0 0 1px #000;
}

Пример: https://codepen.io/madebydima/pen/KKNmBxR

.table_block td {
  padding: 10px;
}
.table_block tbody {
  border-radius: 10px;
  box-shadow: 0 0 1px #000;
}

<table>
  <thead>
    <tr>
      <td>ID</td>
      <td>Название</td>
      <td>Цена</td>
      <td>Цвета</td>
      <td>Продажи</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Name</td>
      <td>50$</td>
      <td>Black, White</td>
      <td>104</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Name</td>
      <td>70$</td>
      <td>Red, Blue, Grey</td>
      <td>255</td>
    </tr>
  </tbody>
</table>

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

CSS Изогнутая рамка | Знаете, как работает изогнутая рамка в CSS?

Изогнутая граница в CSS может быть выполнена с помощью свойства border-radius. Свойство border-radius удаляет углы элементов и заменяет их определенным радиусом. На основе заданного значения радиуса границы зависит форма изогнутой границы. Значения радиуса границы могут быть в пикселях или в процентах. Border-radius можно применять ко всем четырем сторонам элементов, таких как изображения, кнопки, абзацы и т. д. Вы также можете применять одновременно стороны border-radius2, например верхнюю, нижнюю, левую и правую.

Использование в режиме реального времени: Украшение изображений, кнопок, заголовков, абзацев и т. д. с требуемым радиусом с помощью свойства border-radius.

Как изогнутая рамка работает в CSS?

Как мы обсуждали выше, изогнутая граница может быть сгенерирована с радиусом границы. Обратите внимание на синтаксис ниже:

Синтаксис 1:

 div
{
радиус границы: 10px;
} 

border-radius:  Можно применить к верхней, правой, нижней и левой сторонам.

Синтаксис 2:

 дел.
{
радиус границы: 10px 10px 10px 10px;
} 

Объяснение:  Если мы применим border-radius с 4 значениями, то первое значение будет для верхнего левого угла, второе значение — для верхнего правого угла, третье значение — для нижнего правого угла и четвертое значение относится к нижнему левому углу соответственно.

Синтаксис 3:

 дел.
{
радиус границы: 10px 10px 10px;
} 

Объяснение:  Если применить border-radius с тремя значениями, то первое значение будет для верхнего левого угла, второе значение — для верхнего правого угла и нижнего правого угла, третье значение — для нижнего правого угла. левый угол применяется соответственно.

Синтаксис 4:

 дел.
{
радиус границы: 10px 10px;
} 

Объяснение:  Если мы применяем border-radius с двумя значениями, то первое значение относится к верхнему левому углу и верхнему правому углу, а второе значение применяется к нижнему правому углу и нижнему левому углу соответственно.

Синтаксис 5:

 дел.
{
радиус границы: 10px;
} 

Объяснение:  Если мы применяем border-radius с одним значением, то применяем его ко всем четырем сторонам одинаково. Если мы хотим применить только радиус границы поля, тогда CSS предоставляет предопределенные свойства. border-top-left-radius: 10px: примените радиус границы 10px к верхнему левому краю.

Синтаксис 6:

 дел.
{
граница-верхний-левый-радиус: 10px;
} 

border-top-right-radius: 10px: примените радиус границы 10px к верхней правой стороне.

Синтаксис 7:

 дел.
{
граница-верхний-правый-радиус: 10px;
} 

border-bottom-left-radius: 10px: примените радиус границы 10px к нижней левой стороне.

Синтаксис 8:

 дел.
{
радиус нижнего левого края: 10 пикселей;
} 

border-bottom-right-radius: 10px:  применить радиус границы 10px в нижней правой части.

Синтаксис 9:

 дел.
{
граница-нижний-правый-радиус: 10px;
} 

Примечание: Мы можем применить border-radius к двум сторонам за раз, но не к одной стороне за раз.

Примеры изогнутой границы CSS

Ниже приведены различные примеры изогнутой границы CSS.

Пример #1

border-radius со значениями 4 и 3 для абзацев:

Код:

 

<голова>


<стиль>
.values4 {
высота: 200 пикселей;
ширина: 200 пикселей;
радиус границы: 25px 30px 40px 20px;
отступ: 20 пикселей;
цвет фона: оранжевый;
}
.значения3 {
высота: 200 пикселей;
ширина: 200 пикселей;
радиус границы: 25px 30px 40px;
отступ: 20 пикселей;
цвет фона: фуксия;
}

<тело>
Изогнутая граница с радиусом
4 значения
Назначенная задача попадет в папку "Входящие" пользователя
дальнейшее утверждение задачи.  Возможность загрузки назначенной задачи и ее
свойства на каждом уровне действия.
Изогнутая граница с радиусом
3 значения
Назначенная задача попадет в папку "Входящие" пользователя
дальнейшее утверждение задачи. Возможность загрузки назначенной задачи и ее
свойства на каждом уровне действия.

 

Вывод:

Объяснение:  В приведенном выше коде радиус границы применен 4 и 3 значения для абзацев. После применения криволинейного радиуса результат показан выше.

Пример #2

border-radius со значениями 2 и 1 для абзацев:

Код:

 

<голова>


<стиль>
.values4 {
высота: 200 пикселей;
ширина: 200 пикселей;
радиус границы: 25px 30px;
отступ: 20 пикселей;
цвет фона: серый;
}
.значения3 {
высота: 200 пикселей;
ширина: 200 пикселей;
радиус границы: 30px;
отступ: 20 пикселей;
цвет фона: темно-бордовый;
}

<тело>
Изогнутая граница с радиусом
2 значения
Назначенная задача попадет в папку "Входящие" пользователя
дальнейшее утверждение задачи.  Возможность загрузки назначенной задачи и ее
свойства на каждом уровне действия.
Изогнутая граница с радиусом
1 значение
Назначенная задача попадет в папку "Входящие" пользователя
дальнейшее утверждение задачи. Возможность загрузки назначенной задачи и ее
свойства на каждом уровне действия.

 

Вывод:

Объяснение:  В приведенном выше коде для радиуса границы применено значение 2 и 1 для абзацев. После применения криволинейного радиуса результат показан выше.

Пример #3

border-radius со значениями 4 и 3 для абзацев:

Код:

 

<голова>


<стиль>
.tl {
высота: 200 пикселей;
ширина: 200 пикселей;
граница-верхний-левый-радиус: 50px;
цвет фона: серый;
}
.тр {
высота: 200 пикселей;
ширина: 200 пикселей;
граница-верхний-правый-радиус: 50px;
цвет фона: темно-бордовый;
}

<тело>
Изогнутая граница с радиусом
Верхний левый
<дел >
 jpg">