How to create and style borders in css

CSS Справочники

CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы

CSS Свойства

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

Border Images

CSS 3 enables you to use images inside your borders via the border image CSS properties.
The border image CSS properties are:

In addition to these border image CSS properties, you will also have to set
to (to get it to work in Firefox). You will also have to set
to whatever width you want your border to have (the border image will be resized to
fit the ). Remember you can set border width individually for each border.

border-image-source

The CSS property is used to reference the image to use as a border image.
Here is a example:

border-image-source: url('/images/css/border-image.png');

border-image-slice

The CSS property can take between one and four values. These one to
four values are slice coordinates. The meaning of the slice coordinates ()
are illustrated in this image:

Notice the four coordinates . When you draw one vertical line through
each of and , and a horizontal line through each of
and , you end up with 4 lines in total. These lines cut the image into 9 slices. These 9 slices
will be applied to the border of the targeted HTML element.

If you specify less than 4 coordinates, the browser will extrapolate all four coordinates from the values
your specify. For instance, if you write only , the browser will assume that you mean
50 pixels in from each edge of the image. If you write the browser assumes that you mean
50 pixels in from left and right edge, and 100 pixels in from top and bottom edge of the image.

Here is a live example. If you resize the browser window you can see how the
border image is being stretched to fit the element it is applied to.

Here is a with border image.

Here is the code used to create this border image:

<style>
    #withBorderImage1  {
        border-image-source: url('/images/css/border-image.png');
        border-image-slice: 70;
        border-image-repeat: stretch;
        height : 300px;
        border-width: 70px;
        border-style: solid;
    }
</style>

<div id="withBorderImage1">
    Here is a <code>div</code> with border image.
</div>

Notice how the is set to just one value: . That means
that the image should be sliced 70 pixels in from each edge of the image.

Notice also how the is set to . Since we are using 70 pixels
wide slices from the border image, the should be set to 70 pixels, to be able
to display the border correctly. If you specified a value of for ,
then the border image would be resized from 70 pixels to 35 pixels before being rendered as border.

Finally, notice how the is set to . Without this setting
the border image is not rendered in Firefox (at the time of writing).

border-image-repeat

The CSS property is used to define how the sections of the border image
are repeated inside the border of the HTML element, if the border image and HTML element dimensions are
not the same.

The CSS property can accept one of these values:

The value means that the slice will be stretched / scaled to fit the width or height of the
border it is applied to.

The value means that the slice will be repated to fit the width or height of the border it
is applied to.

The value means that the slice will be repeated a whole number of times. The repeated
slices will be stretched to fully fit the border it is applied to.

The value means that the slice will be repeated an whole number of times, but instead
of stretching the slices (as in ), space will be inserted between the repeated slices.

CSS Border Gradient

Through CSS border-image property, web designers can use CSS gradient as a border. This is possible by setting the border-image to repeating-linear-gradient or linear-gradient. Inside the parentheses, include all the colors you want. The color can be a combination of hexadecimal color codes, HSL color values, color names, and RGB color codes.

As well, include a value that defines the border-image-slice property. Ensure you define the border property for the browser to render the gradient border.

– CSS Border Gradient Example

#gradient {

border: 6px solid;

padding: 8px;

border-image: repeating–linear-gradient(to bottom right, #FF77CC, #0033CC, #33475B, rgb(250, 120, 90)) 20;

}

Границы

Последнее обновление: 21.04.2016

Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

border-width: устанавливает ширину границы
border-style: задает стиль линии границы
border-color: устанавливает цвет границы

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

Значения в единицах измерения, таких как em, px или cm
```
border-width: 2px;
```
Одно из константных значений: (тонкая граница — 1px), (средняя по ширине — 3px),
(толстая — 5px)
```
border-width: medium;
```

Свойство в качестве значения принимает цвет CSS:

border-color: red;

Свойство оформляет тип линии границы и может принимать одно из следующих значений:

: граница отсутствует
: граница в виде обычной линии
: штриховая линия
: линия в виде последовательности точек
: граница в виде двух параллельных линий
: граница имеет трехмерный эффект
: граница как бы вдавливается во внутрь
: аналогично inset, только граница как бы выступает наружу
: граница также реализует трехмерный эффект

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border-style: solid;
				border-color: red;
				border-width: 2px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

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

/* для верхней границы */
border-top-width
border-top-style
border-top-color

/* для нижней границы */
border-bottom-width
border-bottom-style
border-bottom-color

/* для левой границы */
border-left-width
border-left-style
border-left-color

/* для правой границы */
border-right-width
border-right-style
border-right-color

Свойство border

Вместо установки по отдельности цвета, стиля и ширины границы мы можем использовать одно свойство — border:

border: ширина стиль цвет

Например:

border: 2px solid red;

Для установки границы для отдельных сторон можно использовать одно из свойств:

border-top
border-bottom
border-left
border-right

Их использование аналогично:

border-top: 2px solid red;

Радиус границы

Свойство border-radius позволяет округлить границу. Это свойство принимает значение радиуса в пикселях или единицах em.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border: 2px solid red;
				border-radius: 30px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

Теперь каждый угол будет скругляться по радиусу в 30 пикселей:

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

border-radius: 15px 30px 5px 40px;

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

border-top-left-radius: 15px;	/* радиус для верхнего левого угла */
border-top-right-radius: 30px;	/* радиус для верхнего правого угла */
border-bottom-right-radius: 5px;	/* радиус для нижнего левого угла */
border-bottom-left-radius: 40px;	/* радиус для нижнего правого угла */

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

border-radius: 40px/20px;

В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y — 20 пикселей.

НазадВперед

Why is CSS Border important?

https://edu.gcfglobal.org/en/basic-css/borders-in-css/1/

You may have struggled to add a border to your website or wanted to customize the border style beyond the basic options provided by your content management system. Whatever your experience, it’s clear that CSS border is essential to web design. CSS border creates various visual elements on websites, from simple outlines around images to complex custom border styles that make designs stand out.

We’ll explore everything you need to know about CSS border, including how to add a border in CSS, style CSS borders, draw a border in CSS, and much more. Read on to understand how to create stunning borders that will make your website stand out.

Цвет границ элемента,css-свойство border-color и его производные

Для установки цвета границ используются ненаследуемые свойства
border-color,
border-top-color,
border-bottom-color,
border-left-color,
border-right-color (см. пример №4).
Все они принимают в качестве значений цвет либо специальное значение transparent, делающее рамку прозрачной
(бесцветной), при этом сама граница остается, влияя на размеры элемента. Свойство border-color, кроме того, может
принимать через пробел два, три или даже четыре значения, которые задают цвет границ по описанному выше алгоритму:

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Установка цвета границ элементов</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px;
		}
		
		/* Цвета границ через слова */
		.border_1{
		border-left-color: black;
		border-right-color: red;
		border-top-color: green;
		border-bottom-color: blue;
		}

		/* Цвета границ в rgb */
		.border_2{
		border-left-color: #000000;
		border-right-color: #FF0000;
		border-top-color: #00FF00;
		border-bottom-color: #0000FF;	
		}
		
		/* Цвета границ в rgba */
		.border_3{
		border-left-color: rgba(0,0,0,0.7);
		border-right-color: rgba(255,0,0,0.7);
		border-top-color: rgba(0,255,0,0.7);
		border-bottom-color: rgba(0,0,255,0.7);		
		}
		
		/* Цвета границ в hsl */
		.border_4{
		border-left-color: hsl(0,0%,0%);
		border-right-color: hsl(0,100%,50%);
		border-top-color: hsl(120,100%,50%);
		border-bottom-color: hsl(240,100%,50%);		
		}
		
		/* Цвета границ в hsla */
		.border_5{
		border-left-color: hsla(0,0%,0%,0.5);
		border-right-color: hsla(0,100%,50%,0.5);
		border-top-color: hsla(120,100%,50%,0.5);
		border-bottom-color: hsla(240,100%,50%,0.5);		
		}		
		
		/* Цвета границ в сокращенном свойстве */
		.border_6{
		border-color: #00FF00 blue rgb(255,0,0) black;
		}
		
	</style>
	
</head>
<body>
	<p class="border_1">
		Цвета границ через слова<br>
		border-left-color: black;<br>
		border-right-color: red;<br>
		border-top-color: green;<br>
		border-bottom-color: blue;
	</p>
	
	<p class="border_2">
		Цвета границ в rgb<br>
		border-left-color: #000000;<br>
		border-right-color: #FF0000;<br>
		border-top-color: #00FF00;<br>
		border-bottom-color: #0000FF;
	</p>
	
	<p class="border_3">
		Цвета границ в rgba<br>
		border-left-color: rgba(0,0,0,0.7);<br>
		border-right-color: rgba(255,0,0,0.7);<br>
		border-top-color: rgba(0,255,0,0.7);<br>
		border-bottom:-color rgba(0,0,255,0.7);
	</p>
	
	<p class="border_4">
		Цвета границ в hsl<br>
		border-left-color: hsl(0,0%,0%);<br>
		border-right-color: hsl(0,100%,50%);<br>
		border-top-color: hsl(120,100%,50%);<br>
		border-bottom-color: hsl(240,100%,50%);
	</p>
	
	<p class="border_5">
		Цвета границ в hsla<br>
		border-left-color: hsla(0,0%,0%,0.5);<br>
		border-right-color: hsla(0,100%,50%,0.5);<br>
		border-top-color: hsla(120,100%,50%,0.5);<br>
		border-bottom-color: hsla(240,100%,50%,0.5);		
	</p>
	
	<p class="border_5">
		Цвета границ в сокращенном свойстве<br>
		border-color: #00FF00 blue rgb(255,0,0) black;		
	</p>
	
</body>
</html>

Пример №4. Установка цвета границ элементов

Understanding Border Radius and Custom Border Styles

https://eqsash.com/articles/kak-sdelat-bordyur-ili-ramku-vokrug-elementa-html-css-svoystvo-border?l=en

As we have seen in the previous section, CSS borders provide a simple and effective way to add visual interest and separation to HTML elements. However, borders don’t have to be limited to just simple lines. With the border-radius property, you can create rounded corners for your borders, and with custom border styles, you can create unique and complex border designs.

Border Radius CSS

Border radius is a CSS property that allows you to create rounded corners for your HTML element’s border. This property can be used to soften the edges of your website’s design, creating a more organic and modern look.

Add the border-radius CSS property to the CSS rule for the element you want to style and set a value for the corner’s radius. The value can be in pixels or percentages and can be set for each corner independently.

Here’s an example of how to use the border-radius property:

<style>
  .box {
    border: 1px solid black;
    border-radius: 10px;
    width: 200px;
    height: 100px;
    background-color: #f2f2f2;
  }
</style>

<div class="box">This is a box with rounded corners.</div>

In this example, we’ve created a div element with the class “box” and applied a 1px solid black border to it. We’ve also set a border-radius of 10 pixels, which creates rounded corners for the box. Finally, we’ve added some width, height, and background color styles to make the box more visible.

You can also set different values for each corner, like this:

<style>
  .box {
    border: 1px solid black;
    border-radius: 10px 20px 30px 40px;
    width: 200px;
    height: 100px;
    background-color: #f2f2f2;
  }
</style>

<div class="box">This is a box with different rounded corner values.</div>

In this example, we’ve set different border-radius values for each box corner. The first value is for the top left corner, the second is for the top right corner, the third is for the bottom right corner, and the fourth is for the bottom left corner. This creates a unique shape for the box that can add visual interest to your design. Border radius CSS is a useful property to help you create more dynamic and modern designs. You can use it to soften the edges of your website’s elements, add unique shapes and styles, and create a more engaging user experience. If you’re looking for something more specific, don’t worry, custom styling sounds right for you.

Создание теней, css-свойство box-shadow

Вместо использования внешней рамки имеется возможность эффективного выделения элементов при помощи теней. Для этого применяется ненаследуемое свойство
box-shadow, которое создает одну или несколько теней, значения которых тогда нужно
перечислять через запятую. Формат записи свойства имеет вид
{box-shadow: смещение_x смещение_y размытие растяжение цвет inset} (см. пример №11), где:

смещение_x – обязательный параметр, который в случае положительных значений смещает тень относительно
элемента по горизонтали вправо, а в случае отрицательных значений – влево; если значение параметра равно нулю, то смещение отсутствует;
смещение_y – обязательный параметр, который в случае положительных значений смещает тень относительно
элемента вверх, а в случае отрицательных значений – вниз; если значение параметра равно нулю, то смещение отсутствует;
размытие – необязательный параметр, который устанавливает радиус размытия тени; чем больше радиус, тем
больше тень становится размытой и осветвленной, особенно по краям; если параметр не указывается, то браузер по умолчанию установит радиус размытия
равный нулю, в результате чего тень будет полностью четкой с резким контуром;
растяжение – необязательный параметр, который в случае положительного значения растягивает тень, а в
случае отрицательного значения сжимает тень; если же значение не будет установлено, то браузер по умолчанию установит растяжение равное нулю
и тень будет иметь те же размеры, что и элемент;
цвет – определяет цвет тени; т.к. браузеры по умолчанию задают разный цвет тени, то желательно
всегда задавать этот необязательный параметр;
inset – тень будет выводиться внутри элемента, при этом она будет располагаться над фоном, но
под любым содержимым элемента; данный параметр не является обязательным и может применяться как в качестве первого параметра, так
и последнего в списке;
none – тень добавляться не будет (используется по умолчанию).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка теней элементов</title>

	<style>
		p{
		width: 300px;
		height: 100px;
		margin-top: 7em;
		}
		
		.p_1{
		border: solid 5px red;
		background-color: yellow;
		box-shadow: 10px 10px 50px 15px blue;
		}
		
		.p_2{
		border: solid 5px orange;
		background-color: violet;
		box-shadow: 5px 5px 8px 10px blue inset,
								10px 10px 8px 10px green,
								15px 15px 8px 10px red
		}
	</style>
	
</head>
<body>
	<p  class="p_1">
		Одна тень.
	</p> 
	
	<p  class="p_2">
		Несколько теней.
	</p> 
</body>
</html>

Пример №11. Использование свойства box-shadow

Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные
в CSS единицы измерения, а для указания цвета использовать все доступные в CSS
цветовые модели.

CSS Image Border

Rather than using a border line, the CSS border-image property lets you set an image as a border. The property acts as the shorthand for border-image-width, border-image-repeat, border-image-outset, border-image-slice, and border-image-source.

However, setting an image as a border only requires the definition of three of these when capitalizing on the shorthand property. The properties are:

border-image-source: establishes the file path or the image URL
border-image-slice: establishes of slicing the image
border-image-repeat: establishes if the border image should be rounded, repeated, or stretched.

To ensure an image border renders, a definition of the border property is necessary.

How do I change my border style? (Custom border styles)

Custom border styles in CSS refer to creating unique borders for your HTML elements beyond the traditional solid or dashed line styles. CSS provides several border styles by default, including solid, dotted, and dashed, but you can create your custom styles using the border-image property. You can combine different border styles, widths, and colors. The border-image property allows you to use an image as the border, and you can control how the image is sliced and repeated to create a border effect.

border-image property

One of the most popular ways to create custom border styles in CSS is by using the property. This property allows you to use an image as the border of your element, instead of a solid line. You can also specify where to slice the image so that it fits the size of your element correctly.

Here’s an example of how to use the property:

<style>
  .box {
    border-image: url(border-image.png) 30 30 round;
    border-width: 30px;
    width: 200px;
    height: 100px;
  }
</style>

<div class="box">This is a box with a custom border image.</div>

In the above example, we’ve created a div element with the class “box” and applied a custom border image to it. We’ve used the property to specify the image file (in this case, “border-image.png”), as well as the slice values (30 pixels on each side) and the border rounding method (“round”).

border-image-slice property

Another way to create custom border styles in CSS is by using the property. This property allows you to specify exactly how to slice the border image, giving you even more control over the final result. You can also use gradients or patterns as border images instead of just images.

Here’s an example of how to use the property:

<style>
  .box {
    border: 10px solid transparent;
    border-image: linear-gradient(to bottom, #f00, #00f) 10 10 repeat;
    border-image-slice: 30;
    width: 200px;
    height: 100px;
  }
</style>

<div class="box">This is a box with a custom border gradient.</div>

In this example, we’ve used a linear gradient as the border image for our element. We’ve set the slice value to 30, which means that the image will be sliced into 30px sections. We’ve also used the property to make sure the gradient repeats along the border, instead of stretching or distorting.

So, custom border styles in CSS are a great way to add unique and engaging visual elements to your website’s design. By using the property, you can incorporate images, gradients, and patterns into your borders, creating a more dynamic and interesting look.

CSS Border Color

The border-color property is the third constituent property of border. It sets the color of the border.

border-color property can have one, two, three or all four values.
If you don’t declare a color, the default color is the foreground color of the element.
Any type of color value can be passed, such as Name, RGB, RGBA, Hexadecimal, etc.

Following values can be passed to border-color:

Value	Description
color	The border will be of the color specified
transparent	The border will be transparent
inherit	The parent element’s value is inherited

You should declare a border-style before declaring border-color, else the border color effect will not be seen.

The border-color property can have upto four values in one statement where we can specify the border color for top, right, bottom and left border.

Example

Let us see an example of border-color:

<html>
<body>
   <h2>border-color with different values</h2>
   <p style="border-style: double; border-color: red;">Red Color Border.</p>
   <p style="border-style: dashed; border-color: #40a944;">Green Color Border</p>
   <p style="border-style: solid; border-color: rgb(255,200,0);">Yellow Color Border</p>
   <p style="border-style: dotted; border-color: hsl(0, 50%, 50%)">Brown Color Border</p>
   <p style="border-style: solid; border-color: red blue green yellow">Mixed Color Borders</p>
</body>
</html>

border-style

С помощью border-style можно сделать рамку в виде пунктирной линии, последовательности точек, придать ей объем, а всему блоку эффект выпуклости или вдавленности. Значение по умолчанию – none (отсутствие рамок).

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

solid: сплошная линия
none: по умолчанию – линии нет
double: двойная линия
dashed: пунктир
dotted: набор точек
groove: придание линии вогнутости
ridge: придание линии выпуклости
inset: эффект вдавленности блока
outset: эффект выпуклости блока

На примере ниже показаны все стили рамок, кроме , который продемонстрирован выше.

See the Pen
border style by Андрей (@adlibi)
on CodePen.

border color shorthand

We can set the border color of each sides using the following shorthands.

This is a sample paragraph.

The above rule will set:

border-top-color = red
border-right-color = green
border-bottom-color = blue
border-left-color = yellow

This is a sample paragraph.

The above rule will set:

border-top-color = red
border-right-color = yellow
border-bottom-color = blue
border-left-color = yellow

This is a sample paragraph.

The above rule will set:

border-top-color = red
border-right-color = blue
border-bottom-color = red
border-left-color = blue

This is a sample paragraph.

The above rule will set:

border-top-color = red
border-right-color = red
border-bottom-color = red
border-left-color = red

CSS Справочники

CSS Свойства

Border Images

border-image-source

border-image-slice

border-image-repeat

CSS Border Gradient

– CSS Border Gradient Example

Границы

Свойство border

Радиус границы

Why is CSS Border important?

Цвет границ элемента,css-свойство border-color и его производные

Understanding Border Radius and Custom Border Styles

Border Radius CSS

Создание теней, css-свойство box-shadow

CSS Image Border

How do I change my border style? (Custom border styles)

border-image property

border-image-slice property

CSS Border Color

Example

border-style

border color shorthand

Похожие записи:

Похожие записи: