Border Radius
CSS Border Radius Property is used to specify radius of the border’s corner of an HTML Element.
Default border corner’s of the HTML Element is right angle, but with the help of the Border Radius Property you can set the corner’s of the border rounded.
If you put only one value to border-radius than by default it will apply all four sides of border. But when you put 4 value than radius will apply (top-border, right-border, bottom-border, left-border) respectively.
Example 5 – Border Radius Syntax
<!DOCTYPE html>
<html>
<head>
<style>
.first
{
border: 3px solid blue;
border-radius: 15px;
}
.second
{
border: 3px solid blue;
border-radius: 10px 13px 16px 19px;
}
</style>
</head>
<body>
<div>
<p class="first">This is a solid border of radius 15 px.</p>
<p class="second">This is a solid border with 4 value radius than first value apply to the top-left corner, second value apply to the top-right corner, third value apply to the right-bottom corner, fourth value apply to the left-bottom corner of an HTML Element.</p>
</div>
</body>
</html>
The above syntax is used to apply radius of border.
The second syntax shows that how can you apply different-different radius on the border’s four side (top-border, right-border, bottom-border, left-border).
Border
Свойство border — базовый атрибут одновременно определяет стиль, цвет и толщину границы элемента.
Так как атрибут border является базовым, значения родственных свойств указываются в любом порядке через пробел.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>border</title><style type=»text/css»>div{ border: RGB(25, 125, 25) 6px ridge;}</style></head><body><div><h3>А знаете ли Вы что:</h3><p>Слон — символ положительного характера — используется в Азии как царское верховное животное и высоко ценится за ум и хитрость.</p>… … …</div></body></html>
смотреть пример
Однако если Вы хотите присвоить разные свойства различным сторонам границы элемента или только одной из них, пользуйтесь свойствами border-bottom, border-left, border-right, border-top.
border-radius
С помощью свойства можно уходить от квадратных углов, вводя величину радиуса скругления.
На примере ниже 2 квадрата. Один залит синим цветом, у вокруг второго нарисована рамка. Для элементов задано скругление:
See the Pen
border radius by Андрей (@adlibi)
on CodePen.
Для каждого угла можно задать свой радиус скругления.
Так, для квадрата на примере ниже, задано такое свойство:
Значения устанавливаются для углов по часовой стрелке.
See the Pen
border radius 4 by Андрей (@adlibi)
on CodePen.
Количество значений может быть от 1 до 4. В таблице приведены результаты введения разного количества значений.
| Количество значений свойства | Результат |
|---|---|
| 1 | Все стороны выполнены в одном стиле |
| 2 | Стиль устанавливается отдельно для горизонтальных (1-е значение) и вертикальных границ (2-е значение) |
| 3 | 1-е значение – верх лево; 2-е – верх право и низ лево; 3-е – низ право. |
| 4 | Все границы выполнены в разных стилях. Соответствие значениям (с 1-го по 4-е) – по часовой стрелке, начиная с верхней. |
Интересно, что для каждого угла можно задать два параметра скругления через знак слэша. При этом первая величина – горизонтальный радиус, вторая – вертикальный. Показать это лучше на примере. Вот что получится, если для фигуры задать свойство:
See the Pen
border radius 2 by Андрей (@adlibi)
on CodePen.
Радиуса скругления можно задавать в процентах. Это удобно, например, если вы хотите нарисовать круг, то просто задайте для квадрата .
See the Pen
border radius 50percent by Андрей (@adlibi)
on CodePen.
border
The CSS property sets the border around an HTML element, meaning all four borders
(top, right, bottom and left). The CSS property value consists of three parts:
- border width
- border style
- border color
Each of these parts are specified when setting the property, separated by a space.
Here is an example:
#theDiv {
border : 1px solid #000000;
}
The first value is which is the border width. This value sets the border around
the HTML element to a width of 1 pixel. Border widths are specified using any of the valid
CSS units.
The second value is which is the border style. This value sets the border
to be solid, meaning a simple line (not dashed, no 3D effect etc.). There are many more styles you
can choose from. These will be covered later.
The third value is which is the . This value sets
the border color to black. Border colors are specified using the CSS colors
formats.
Border Color
CSS Border Color is used to apply different-different color on the border design.
You can apply Border Color by 3 ways:
- name – specify a color by the name, such as “green”
- RGB – specify a color by the RGB value, such as “rgb(0,128,0)”
- Hex – specify a color by the Hex value, such as “#008000”
Note: If you put only one value to border-color than by default it will apply all four sides of border. But when you put 4 value than color will apply (top-border, right-border, bottom-border, left-border) respectively.
Example 3 – Border Color Property Syntax to improve look and feel
<!DOCTYPE html>
<html>
<head>
<style>
.first
{
border-style: solid;
border-color: lime;
}
.second
{
border-style: solid;
border-color: lime red yellow blue;
}
</style>
</head>
<body>
<div>
<p class="first">This is a solid border with lime color.</p>
<p class="second">This is a solid border with 4 color lime on top, red on right, yellow on bottom, blue on left border.</p>
</div>
</body>
</html>
The above syntax is used to apply color ob border.
The second syntax shows that how can you apply different-different color on the border’s four side (top-border, right-border, bottom-border, left-border).
Fig.3 – CSS Border Color
Border Bottom
Border Bottom Property is a shorthand property. Border Bottom Property is used to apply style, color, width and radius to the Bottom side of border
Example 7 – Border Bottom Syntax Property
<!DOCTYPE html>
<html>
<head>
<style>
.first
{
border-bottom-style: solid;
border-bottom-color: green;
border-bottom-width: 4px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.second
{
border-bottom: 4px solid blue;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div>
<p class="first">This is a solid border .</p>
<p class="second">This is also a solid border.</p>
</div>
</body>
</html>
The above syntax is used to apply shorthand property for bottom of border.
The second syntax shows another way of shorthand property where first value is for width, second value is for style, and third value is for color.
Border Right
You can set the color, style and width of the right border around an element in one declaration with the border-right property.
border-right: 1px solid #333333;
Values:
- color
- style
- width
Or you can set each value individually
Border Right Color
You can set the color of the right border around an element with the border-right-color property.
border-right-color: value;
Border Right Style
You can set the style of the right border around an element with the border-right-style property.
border-right-style: value;
Border Right Width
You can set the width of the right border around an element with the border-right-width property.
border-right-width: value;
border style shorthand
We can set the border style of each sides using the following shorthands.
This is a sample paragraph.
The above rule will set:
- border-top-style = solid
- border-right-style = dashed
- border-bottom-style = dotted
- border-left-style = double
This is a sample paragraph.
The above rule will set:
- border-top-style = solid
- border-right-style = dashed
- border-bottom-style = double
- border-left-style = dashed
This is a sample paragraph.
The above rule will set:
- border-top-style = solid
- border-right-style = dashed
- border-bottom-style = solid
- border-left-style = dashed
This is a sample paragraph.
The above rule will set:
- border-top-style = dashed
- border-right-style = dashed
- border-bottom-style = dashed
- border-left-style = dashed
Значения
- <цвет>
- См. цвет
- transparent
- Устанавливает прозрачный цвет.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>border-left-color</title>
<style>
.line {
border-left-color: #fc0; /* Цвет линии слева */
border-left-style: solid; /* Стиль линии */
border-left-width: 7px; /* Толщина линии */
padding-left: 10px; /* Расстояние между линией и текстом */
}
</style>
</head>
<body>
<div class=»line»>Как отмечает Теодор Адорно,
доминантсептаккорд полифигурно имитирует голос.
Доминантсептаккорд варьирует хроматический шоу-бизнес.
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования border-left-color
Примечание
Internet Explorer до версии 6.0 включительно не поддерживает значение transparent.
Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.
Спецификация
| Спецификация | Статус |
|---|---|
| Возможная рекомендация | |
| Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 4 | 7 | 12 | 1 | 9.2 | 1 | 1 |
| 1 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Синтаксис
Синтаксис
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | ||
| * | Повторять ноль или больше раз. | * |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
# Creating a multi-colored border using border-image
HTML
The above example would produce a border that comprises of 5 different colors. The colors are defined through a (you can find more information about gradients in the ). You can find more information about property in the example(opens new window) in same page.
(Note: Additional properties were added to the element for presentational purpose.)
You’d have noticed that the left border has only a single color (the start color of the gradient) while the right border also has only a single color (the gradient’s end color). This is because of the way that border image property works. It is as though the gradient is applied to the entire box and then the colors are masked from the padding and content areas, thus making it look as though only the border has the gradient.
Which border(s) have a single color is dependant on the gradient definition. If the gradient is a gradient, the left border would be the start color of the gradient and right border would be the end color. If it was a gradient the top border would be the gradient’s start color and bottom border would be end color. Below is the output of a 5 colored gradient.
If the border is required only on specific sides of the element then the property can be used just like with any other normal border. For example, adding the below code would produce a border only on the top of the element.
Note that, any element that has property won’t respect the (that is the border won’t curve). This is based on the below statement in the spec:
A box’s backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’).
Спецификация
| Спецификация | Статус |
|---|---|
| Возможная рекомендация | |
| Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Стиль границы.
Если в HTML бордюр мог быть только в виде сплошной линии вокруг элемента, то в CSS это уже достаточно широкий набор возможных стилей рамок.
Свойство border-style может присваивать элементу один из ниже перечисленных стилей границы.
- none — граница отсутствует (по умолчанию).
- dotted — граница из ряда точек.
- dashed — пунктирная граница.
- solid — сплошная граница
- double — двойная граница
- groove — граница «бороздка»
- ridge — граница «гребень»
- inset — вдавленная граница
- outset — выдавленная граница
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Стиль границы</title><style type=»text/css»>p {background-color: #f5f5f5;text-align: center;}</style></head><body><p style=»border-style: none;«>граница отсутствует</p><p style=»border-style: dotted;«>граница из ряда точек</p><p style=»border-style: dashed;«>пунктирная граница</p><p style=»border-style: solid;«>сплошная граница</p><p style=»border-style: double;«>двойная граница</p><p style=»border-style: groove;«>граница «бороздка»</p><p style=»border-style: ridge;«>граница «гребень»</p><p style=»border-style: inset;«>вдавленная граница</p><p style=»border-style: outset;«>выдавленная граница</p></body></html>
смотреть пример
Стиль бордюра может быть задан как для всех сторон элемента одновременно, так и для каждой его стороны отдельно в зависимости от того, сколько значений присвоено свойству border- style. Таковых значений может быть от одного до четырёх по числу сторон элемента.
В каждом из четырёх случаев действуют свои «правила» по присуждению стиля рамки той или иной стороне элемента, которые приведены в таблице ниже:
| Число значений | Результат |
|---|---|
| 1 |
Пример: div {border-style: solid;} Первое значение — Устанавливает единый стиль бордюра для всех сторон элемента. |
| 2 |
Пример: div {border-style: solid double;}
|
| 3 |
Пример: div {border-style: solid double dashed;}
|
| 4 |
Пример: div {border-style: solid double dashed ridge;}
|
Border radius #
To give a box rounded corners use the property.
This shorthand adds a consistent border to each corner of your box. As with the other border properties, you can define the border radius for each side with , , and .
You can also specify each corner’s radius in the shorthand, which follows the order: top left, top right, bottom right then bottom left.
By defining a single value for a corner, you are using another shorthand because a border radius is split into two parts: the vertical and horizontal sides. This means that when you set , you are setting the top-left-top radius and the top-left-left radius.
You can define both properties, per corner like this:
This adds a value of , and a value of . This converts the top left border radius into an elliptical radius, rather than the default circular radius.
You can define these values in the shorthand, using a to define the elliptical values, after the standard values. This enables you to get creative and make some complex shapes.
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
CSS Border Padding
The CSS padding property creates space between an element’s content and an element’s border. If the padding property is not defined, then there is no space between its content and its border.
To add space, you can set the padding property using length or percentage values. Values must be positive. Negative values will not render.
Like the properties above, the padding property can have between one and four values. If only one value is defined, then it applies to all sides of the element. If two values are defined, then the first value represents the top and bottom padding and the second represents the right and left padding. If three values are defined, the first value represents the top padding, the second represents the left and right, and the fourth represents the bottom padding. If four values are defined, they represent the top, right, bottom, and left, respectively.
Let’s take a look at examples defined by different padding values below.
See the Pen jOBXXRW by Christina Perricone (@hubspot) on CodePen.
CSS Border Shadow
The CSS box-shadow property can be used in combination with the border property to create a shadow effect. There are two required values to set the border-style property: the h-offset and the v-offset. Let’s define these below:
- h-offset: This value sets the horizontal offset of the shadow. A positive value sets the shadow on the right side of the box, a negative value sets the shadow on the left side.
- v-offset: This value sets the vertical offset of the shadow. A positive value sets the shadow below the box, a negative value sets the shadow above.
There are four optional values that you can add after the h- and v-offset values to affect the box-shadow. Let’s take a quick look at them below.
- Blur: Include a third value to add a blurred effect. The higher the number, the more blurred the shadow will be.
- Spread: Include a fourth value to define the spread of the shadow. A positive value increases the size of the shadow, a negative value decreases it.
- Color: Include a color name, hex code, or other color value to define the color of the shadow. If no color value is included, the shadow color is the text color.
- Inset: Include the inset keyword to set the shadow inside the box.
You can also define multiple shadows. Simply separate the set of required and optional values by commas. Make sure to increase the h- and v-offset values of the cascading shadows so you can actually see them.
Let’s take a look at examples defined by different border-shadow values below.
See the Pen CSS Border Shadow by Christina Perricone (@hubspot) on CodePen.
Border Top
You can set the color, style and width of the top border around an element in one declaration with the border-top property.
border-top: 1px solid #333333;
Values:
- color
- style
- width
Or you can set each value individually
Border Top Color
You can set the color of the top border around an element with the border-top-color property.
border-top-color: value;
Border Top Style
You can set the style of the top border around an element with the border-top-style property.
border-top-style: value;
Border Top Width
You can set the width of the top border around an element with the border-top-width property.
border-top-width: value;
Previous Chapter: Chapter 12 — CSS Backgrounds
Next Chapter: Chapter 14 — Ordered & Unordered Lists
CONTENT 2004-2008 CSS BASICS, a site by Splashpress Media.Content written by Ben Partch with contributions from Paul O’Brien & Vinnie Garcia.
Terms of Use —
Accessibility —
Feedback
# border-[left|right|top|bottom]
The property is used to add a border to a specific side of an element.
For example if you wanted to add a border to the left side of an element, you could do:
**border**
border: border-width border-style border-color | initial | inherit;
border-top: border-width border-style border-color | initial | inherit;
border-bottom: border-width border-style border-color | initial | inherit;
border-left: border-width border-style border-color | initial | inherit;
border-right: border-width border-style border-color | initial | inherit;
**border-style**
border-style: 1-4 none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
**border-radius**
border-radius: 1-4 length | % / 1-4 length | % | initial | inherit;
border-top-left-radius: length | % | initial | inherit;
border-top-right-radius: length | % | initial | inherit;
border-bottom-left-radius: length | % | initial | inherit;
border-bottom-right-radius: length | % | initial | inherit;
**border-image**
border-image: border-image-source border-image-slice ] border-image-repeat
border-image-source: none | image;
border-image-slice: 1-4 number | percentage
border-image-repeat: 1-2 stretch | repeat | round | space
**border-collapse**
border-collapse: separate | collapse | initial | inherit
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
# border-image
With the property you have the possibility to set an image to be used instead of normal border styles.
A essentially consist of a
- : The path to the image to be used
- : Specifies the offset that is used to divide the image into nine regions (four corners, four edges and a middle)
- : Specifies how the images for the sides and the middle of the border image are scaled
Consider the following example wheras border.png is a image of 90×90 pixels:
The image will be split into nine regions with 30×30 pixels. The edges will be used as the corners of the border while the side will be used in between. If the element is higher / wider than 30px this part of the image will be stretched. The middle part of the image defaults to be transparent.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>border-left-color</title>
<style>
.line {
border-left-color: #fc0; /* Цвет линии слева */
border-left-style: solid; /* Стиль линии */
border-left-width: 7px; /* Толщина линии */
padding-left: 10px; /* Расстояние между линией и текстом */
}
</style>
</head>
<body>
<div class=»line»>Как отмечает Теодор Адорно,
доминантсептаккорд полифигурно имитирует голос.
Доминантсептаккорд варьирует хроматический шоу-бизнес.
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования border-left-color
