One of the fun applications of the CSS3 box-shadow property is to create a double border around an element. A very interesting effect for page decoration, But it will only work in newer versions of browsers that support box-shadow.
However, there are several more methods to create this effect. Moreover, the obvious use of a background image is very far from ideal.
This tutorial introduces five methods for creating a double border around an element. And only one of them requires an image, while all the others use pure CSS code with excellent support in browsers.
Method 1: border and outline
This method only works in browsers that support the outline property (all except IE6 / 7). You add both border and outline properties to the element.
One (border: solid 6px #fff; outline: solid 6px # 888;)
The reason this method works is because the outline frame always draws on the outside of the rectangle. The problem with the outline property occurs when floating elements are used, as the border overlaps with adjacent elements.
Method 2: pseudo element
This method requires absolute positioning of the frame:
Two (border: solid 6px #fff; position: relative; z-index: 1;) .two: before (content: ""; display: block; position: absolute; top: -12px; left: -12px; border: solid 6px # 888; width: 312px; padding-bottom: 12px; min-height: 100%; z-index: 10;)
The key points are setting the z-index property (so that the pseudo element overlaps the content), positioning, and the min-height value. The latter property preserves the elasticity of the frame.
Method 3: shadow
The best method as it only requires one line of code with the box-shadow property settings.
Three (box-shadow: 0 0 0 6px #fff, 0 0 0 12px # 888;)
Two shadows are used to create a double border. They are separated by commas. The blur is set to 0. Since the second shadow overlaps with the first, it has twice the width. The key point is the use of opaque colors, which creates a clear border between the frames.
Like the outline property, box-shadow does not affect adjacent elements and can overlap them. Therefore, it is necessary to set a field to form the appearance of the composition.
Naturally, support for the box-shadow property is limited to newer browsers.
Method 4: the extra div element
This method uses an external element
Four (border: solid 6px # 888; background: #fff; width: 312px; min-height: 312px;) .four div (width: 300px; min-height: 300px; background: # 222; margin: 6px auto; overflow : hidden;)
The outer element is slightly larger, giving the illusion of a double border.
Method 5: the border-image property
Another new technique is the often overlooked CSS3 border-image property:
Five (border-width: 12px; -webkit-border-image: url (multiple-borders.gif) 12 12 12 12 repeat; -moz-border-image: url (multiple-borders.gif) 12 12 12 12 repeat; border-image: url (multiple-borders) 12 12 12 12 repeat; / * for Opera * /)
Do you know another method?
Of course, here are collected long-known and widely used methods. But maybe you know a trick. Share with your readers in the comments.
Michael 2016-06-11 1 HTML and CSS 0
How is double border done in css?
Hello everyone. Do you know how to double border in css? If not, please read this small note. The fact is that you cannot do this with a regular border, you have to go the other way.
If you specify a border using the border property, you can only specify one. But very often a design may require multiple frames. In this case, you should use a pseudo-frame - a shadow.
Double border with box-shadow
In general, if you want to learn more about the shadow in css, then I advise you to read on the relevant topic. In this article, I will not explain the syntax of the property in detail, but will simply show you a trick on how to create a double border. So, let's create an ordinary block, which I will assign some styles to. The block can be any and with any content. In my case, it's a simple div, so I won't even show the html code. And here are the styles:
Div (
background: # E0D8A3;
width: 180px;
height: 110px;
padding: 12px;
}
Well, a typical example of block design.
Now let's create a double border using multiple drop shadows. I will add the following property to the styles for the block:
Box-shadow: 0 0 0 1px # 000, 0 0 0 10px # E0D8A3;
This is how it looks:
As you can see, it turned out quite nicely. There are only 5 parameters in box-shadow. The first is the horizontal shift of the shadow, the second is the vertical. The third and fourth parameters are blur and stretch. As you can see, we do not touch the first three at all. We don't need blur because we want a sharp shadow. As you can see, I prescribed the fourth parameter - stretching. It determines how much the shadow will be larger than the element it is attached to.
By default, everything looks like this - the shadow is the same size as the element and lies clearly under it. If you change the stretch, then the shadow begins to protrude beyond the element. This is how you can create borders, exactly the same as with the border property. Well, with the fifth parameter, I think everything is clear - this is the color of the shadow.
As you can see, I just listed the parameters for each new shadow, separated by commas. I think you already guessed that you can create a triple border, etc. in the same way. There are no restrictions here. Actually, as for me, the question is closed, but if you have any questions, you can write them in the comments.
Just a moment of your attention: We all want to host our sites on a reliable hosting. I have analyzed hundreds of hostings and found the best one - HostIQ There are hundreds of positive reviews about him online, the average user rating is 4.8 out of 5. May your sites be happy.
Frames can be used in many ways, for example as a decorative element or to separate two objects. CSS provides countless options for using frames.
Frame thickness
The width of the border is determined by the border-width property, which can be thin, medium, and thick, or a numeric value in pixels. The figure shows this system:
Frame color
The border-color property defines the color of the border. Values are normal color values such as "# 123456", "rgb (123,123,123)", or "yellow".
Frame types
There are different types of frames. The eight frame types and their interpretation in Internet Explorer 5.5 are shown below. All examples are shown in "gold" color and "thick" thickness, but can, of course, be displayed in a different color and thickness.
The values none or hidden can be used if you don't want to display the border.
Examples of defining frames
The three properties discussed above can be combined in each element and, accordingly, set different frames. To illustrate, take a look at a document that defines different frameworks for
, , and The result may not be as impressive, but it demonstrates some possibilities:
H1 (border-width: thick; border-style: dotted; border-color: gold;) h2 (border-width: 20px; border-style: outset; border-color: red;) p (border-width: 1px; border-style: dashed; border-color: blue;) ul (border-width: thin; border-style: solid; border-color: orange;)
You can also set custom properties for the top, bottom, right, and left edges of the frame. Here's how to do it:
H1 (border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange;)
Abbreviated notation
As with many other properties, you can combine multiple properties into one using the word border. Example:
P (border-width: 1px; border-style: solid; border-color: blue;)
can be combined into:
P (border: 1px solid blue;)
Summary
In this tutorial, you learned about the limitless possibilities of CSS when using frames.
In the next lesson, we'll look at how to define dimensions in the box model - height and width.
Property CSS – « border», Allows you to set the thickness, color and type of the perimeter line around the element. The parameters of this property can be written on one line, separated by spaces and in any order.
- - line width one pixel
- - solid line
- - White color
- - black color
- - grey colour
Solid element border
Dashed element border
Dotted element border
Element border with double line
Property of individual sections of the border
Embossed corrugated frame in volume
Convex corrugated frame in volume
Volumetric depressed frame
Volumetric convex frame
Tutorials / CSS /
Lesson 7. Frame a CSS Element
Almost every site uses a property that creates a border around an element. It is needed either for buttons or for blocks with text. To create a border, an element in CSS has two properties: border and outline. Let's consider them.
border
This property is needed to set a border around an element, indicates its border in a web document, the width of the border is taken into account when positioning the element. It has 3 values - color, thickness and frame type.
The syntax for the border property is as follows:
border: Width Type Color;
You can choose a different order of specifying property values, but the main thing is through a space.
The thickness (width) of the frame must be specified in pixels (px) or percentage (%).
The color can be specified either in RGB (Red Green Blue) format, or in HTML HEX code.
Below are the TYPES OF LINE with their names:
How to set borders on an element? We do as follows:
#block (
border: 3px solid # 0085cc; / * set a 3px blue line * /
}
If you want to install one-two-three frames from a certain side, then we indicate it like this:
border-top- frame on top;
border-bottom- frame at the bottom;
border-left- frame on the left;
border-right- the frame on the right;
Block (
border-right: 3px solid # 0085cc;
border-bottom: 2px dashed # 0085cc;
}
If you want to remove frames element in CSS, then write in the property border - none
Empty (
border: none; / * element with class empty will not have a border * /
}
outline
Outline is the property you need to set the outer border of an element.
There is two differences from border:
First, the line given in the outline will NOT affect the position of the box itself, its width and height.
Secondly, there is no possibility of installing a frame from a certain side.
The syntax is the same as border.
outline: 2px dotted # 0085cc; / * 2 pixel dotted blue border * /
For outline, as well as for border, you can remove borders by typing none:
Thank you for the attention!
Previous article
Lesson 6.
The bounds of the element.
Padding and margins in CSS. What are margin and padding? Next article
Lesson 8. How to set the text color and background of an element in CSS?
Comments on the article (vk.com)
border
Browser support
12.0+
4.0+
1.0+
1.0+
3.5+
1.0+
Description
The CSS property allows you to simultaneously set the width, style and color for the border of the block. The block border is a regular line / frame that surrounds the block on all sides. It should be borne in mind that when you add a border, it will affect the overall size of the block.
The values are separated by a space and can be in any order, the browser will determine which one matches the required parameter. All three values are optional, the width and / or color can be omitted, in which case the value set for the default property will be used instead of the missing value, i.e. if, for example, no width is specified, then the property's default value will be used. The table below the syntax contains the values of which properties you can use.
Note: To set borders only on certain sides of an element, use the following properties: border-top, border-bottom, border-left, border-right.
Tip: Generally, when using a border, you need to add padding.
CSS property: border
They add white space between the frame of the block and its content: text, images, or child tags. Usually the border is displayed close to the content of the element, this is useful only if you need to set a border around the picture.
Syntax
border: border-width border-style border-color | inherit;
Property values
Example
Example There is some text here.
The result of this example in a browser window:
How to set the color, style and size of the border in the boxes.
In markup languages, the border ( border), have only tables, pictures and frames, in some cases it is possible to set the border color and that's it.
Border attribute
Cascading style sheets give us more options, but first things first.
In CSS, we can control the width of the border with border-width, or to be more precise, we can control the thickness of each side separately:
border-top-width- the thickness of the top border
border-right-width- thickness of the right border
border-bottom-width- the thickness of the lower border
border-left-width- left border thickness
But there can also be a shorthand form:
P (border-width: top right bottom left;)(top right bottom left).
Curb width can be set:
figures DIV (border-width: 5px), from zero to infinity, i.e. positive.
thin- thin border, DIV (border-width: thin)
medium- medium border, DIV (border-width: medium)
thick- thick border, DIV (border-width: thick)
It is clear with numbers, but with these values it all depends on the browser, but still thin<= medium <= thick
.
We can also control the color of the border with border-color or to be more precise with the color of each side:
border-top-color top border color;
border-right-color right border color;
border-bottom-color lower border color;
border-left-color the color of the border on the left side.
The color value is set as for color, i.e. one of 16 colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white or yellow, also colors can be set: color: # 000000, color: # AF0 , color: rgb (255,0,0) or color: rgb (100%, 0%, 0%).
No matter what color scheme you choose, browsers will still translate it to color: rgb (255,0,0)... For example color: lime = color: # 00ff00 = color: # 0F0 = color: rgb (0%, 100%, 0%), but for the browser it doesn't matter color: rgb (0,255,0), i.e. it will calculate this value.
If the thickness and color of the border can be controlled by HTML, then the style ( border-style) CSS only !!!
The style can be controlled by each side separately:
border-top-style top border style;
border-right-style right border style;
border-bottom-style bottom border style;
border-left-style the style of the border on the left side.
Now let's look at the style values:
1)border-style: none- This is the default, similar to border-width: 0.
2)border-style: hidden- Same, except for tables, which we will look at later.
3)border-style: dotted- Dotted border.
4)border-style: dashed- Dotted line border.
5)border-style: solid- Solid line border, i.e. as in HTML.
6)border-style: double- Double solid line border, here you need a border-width of at least 3pixels.
7)border-style: groove- The border looks like it was cut into the canvas.
8)border-style: ridge- The border looks like protruding from the canvas.
9)border-style: inset- The whole box looks like it is pressed into the canvas.
10)border-style: outset- Opposite to the previous one.
Some browsers may ignore the values: dotted, dashed, double, groove, ridge, inset and outset and output them as solid, i.e. the usual border.
All of course this is so, but all the examples above are only a principle of operation, not a mechanism.
Rule property border implies (border: size style color;), this rule is executed if all three values are present and only in this order, for example H1 (border: 5px double red;), but there may be exceptions if these values are provided by markup languages, for example, for a table TABLE (border: 2px), i.e. only one value is specified.
In order to manage not the entire curb, but each part separately, there are rules:
(border-top: size style color;) Upper curb control;
(border-right: size style color;) Curb control on the right;
(border-bottom: size style color;) Lower curb control;
(border-left: size style color;) Curb control on the left.
These rules can be used separately or all together.
The exception is this rule:
H1 (
border: 4px solid green;
}
The thing is that in CSS the last rule has the highest priority, in this case the border property contains border-left and therefore the border-left rule will be ignored, right like this:
H1 (
border: 4px solid green;
border-left: 2px double red;
}
From the beginning, we set the rules for the entire curb, and then for individual areas.
I have everything on the borders for the elements, except that we will consider some properties when we get to tables and other exceptions.
CSS: border. The bounds of the element.
CSS3 Borders
CSS3 Borders
With CSS3, you can create rounded borders, add shadows to containers, and use an image as a border - all without using a design program like Photoshop.
In this tutorial, you will learn about the following border properties:
- border-radius
- box-shadow
- border-image
Browser Support
Property
Browser Support
border-radius
box-shadow
border-image
Internet Explorer 9 supports some of the new border properties.
Firefox requires the -moz- prefix for border-image.
Chrome and Safari require the -webkit- prefix for border-image.
Opera requires the -o- prefix for border-image.
Safari also requires the -webkit- prefix for box-shadow.
Opera supports new border properties.
CSS3 Rounded Corners
Adding rounded corners to CSS2 was tricky. We had to use different images for each corner.
In CSS3, creating rounded corners is easy.
In CSS3, the border-radius property is used to create rounded corners:
This block has rounded corners!
CSS3 Box Shadow
In CSS3, the box-shadow property is used to add shadows to containers:
CSS3 Border-Image
With the CSS3 border-image property, you can use an image to create a border:
The border-image property allows you to specify a border-image!
The original image used to create the border is yours:
New Border Properties
Border attribute
Border attribute, tag
, used to specify the thickness of the border around the table.
HTML Borders
It is permissible to use border without values, then the border thickness will be equal to one pixel. By default, the frame is displayed with 3D effects, but if you additionally apply the background attribute, the frame will become “flat”.
In addition, if the border attribute is nonzero, then browsers also show thin borders around the cells themselves. The display of these boundaries can be controlled using the rules attribute.
The values
The attribute value can be any non-negative number specifying the size in pixels.
Default value: 0.
Syntax
Required Attribute: None.
HTML Example: Applying the Border Attribute
Example result
Result. Applying the border attribute.
The CSS border property aliases to create the border of an object, namely the thickness of the border, its color and style. This property is widely used in HTML. You can create various effects to better perceive the content on the page. For example, design a sidebar, site header, menu, etc.
1. CSS border syntax
border: border-width border-style border-color | inherit;
- border-width - border thickness. You can set it in pixels (px) or use the standard values thin, medium, thick (they differ only in width in pixels)
- border-style - the style of the rendered border. Can take the following values
- none or hidden - cancels the border
- dotted - dotted frame
- dashed - dash frame
- solid - simple line (used most often)
- double - double border
- groove - 3D grooved border
- ridge, inset, outset - various 3D frame effects
- inherit - the value of the parent element is applied
- border-color - border color. Can be set using a specific color name or in RGB format (see the names of html colors for the site)
Note The values in the CSS border property can be specified in any order. The most commonly used sequence is "thickness style color".
2. Examples with different CSS border borders
2.1. Example. Different styles of border-style border decoration
border-style: dashed
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки
border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover
и рамку CSS border для создания простых эффектов (например, для меню).
При наведении курсора мыши на блок цвет рамки изменится
Вот как это выглядит на странице:
2.3. Пример. Как сделать прозрачную рамку border
Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P)
, где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)
Вот как это выглядит на странице:
3. Толщина границы: свойство border-width
Задает толщину линии. Ранее мы задавали ее в едином описании border.
Синтаксис CSS border-width
border-width
: thin | medium | thick | значение
;
- thin
- тонкая толщина линии
- medium
- средняя толщина линии
- thick
- толстая толщина линии
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
Вот как это выглядит на странице:
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
4. Как сделать рамку border только с одного края (границы)
У свойства CSS border
есть производные свойства для задания односторонних границ у элемента:
- border-top
- для задания рамки сверху (верхняя граница)
- border-bottom
- для задания рамки снизу (нижняя граница)
- border-right
- для задания рамки справа (правая граница)
- border-left
- для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color
- задание цвета верхний границы
- border-top-style
- задание стиля верхней границы
- border-top-width
- задание толщины верхней границы
- и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
/* Описание двух одинаковых стилей:
*/
4.1. Пример. Красивая рамка для выделения цитат
Пример рамки для цитаты
Вот как это выглядит на странице:
Пример рамки для цитаты
Примечание
Можно задать отдельную границу для каждой из сторон.
5. Как сделать несколько границ border у элемента html
Иногда требуется сделать несколько границ. Приведем пример
5.1. Первый вариант с несколькими границами
Вот как это выглядит на странице:
Есть второй способ через наложение теней.
5.2. Наложение теней для создания нескольких границ
Вот как это выглядит на странице:
6. Скругление углов у границ (border-radius)
Для создания красивых рамок используют свойство CSS border-radius
(доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например
7. Вдавленная линия CSS
Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.
Вот как это выглядит на странице:
Для обращения к border
из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.border
="VALUE
"
Рекомендуем
Как сделать в css все заглавные буквы Как сделать заглавные буквы при помощи css
Доброго времени суток, гики сайтостроения. В сегодняшней публикации будет рассмотрена тема, касающаяся оформления текстового контента. Именно поэтому вы...
- and
- - line width one pixel
- - solid line
- - White color
- - black color
- - grey colour
- border-radius
- box-shadow
- border-image
- border-width - border thickness. You can set it in pixels (px) or use the standard values thin, medium, thick (they differ only in width in pixels)
- border-style - the style of the rendered border. Can take the following values
- none or hidden - cancels the border
- dotted - dotted frame
- dashed - dash frame
- solid - simple line (used most often)
- double - double border
- groove - 3D grooved border
- ridge, inset, outset - various 3D frame effects
- inherit - the value of the parent element is applied
- border-color - border color. Can be set using a specific color name or in RGB format (see the names of html colors for the site)
- thin - тонкая толщина линии
- medium - средняя толщина линии
- thick - толстая толщина линии
- border-top - для задания рамки сверху (верхняя граница)
- border-bottom - для задания рамки снизу (нижняя граница)
- border-right - для задания рамки справа (правая граница)
- border-left - для задания рамки слева (левая граница)
- border-top-color - задание цвета верхний границы
- border-top-style - задание стиля верхней границы
- border-top-width - задание толщины верхней границы
- и т.д. для каждого направления
The result may not be as impressive, but it demonstrates some possibilities:
H1 (border-width: thick; border-style: dotted; border-color: gold;) h2 (border-width: 20px; border-style: outset; border-color: red;) p (border-width: 1px; border-style: dashed; border-color: blue;) ul (border-width: thin; border-style: solid; border-color: orange;)
You can also set custom properties for the top, bottom, right, and left edges of the frame. Here's how to do it:
H1 (border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange;)
Abbreviated notation
As with many other properties, you can combine multiple properties into one using the word border. Example:
P (border-width: 1px; border-style: solid; border-color: blue;)
can be combined into:
P (border: 1px solid blue;)
Summary
In this tutorial, you learned about the limitless possibilities of CSS when using frames.
In the next lesson, we'll look at how to define dimensions in the box model - height and width.
Property CSS – « border», Allows you to set the thickness, color and type of the perimeter line around the element. The parameters of this property can be written on one line, separated by spaces and in any order.
Solid element border
Dashed element border
Dotted element border
Element border with double line
Property of individual sections of the border
Embossed corrugated frame in volume
Convex corrugated frame in volume
Volumetric depressed frame
Volumetric convex frame
Tutorials / CSS /
Lesson 7. Frame a CSS Element
Almost every site uses a property that creates a border around an element. It is needed either for buttons or for blocks with text. To create a border, an element in CSS has two properties: border and outline. Let's consider them.
border
This property is needed to set a border around an element, indicates its border in a web document, the width of the border is taken into account when positioning the element. It has 3 values - color, thickness and frame type.
The syntax for the border property is as follows:
border: Width Type Color;
You can choose a different order of specifying property values, but the main thing is through a space.
The thickness (width) of the frame must be specified in pixels (px) or percentage (%).
The color can be specified either in RGB (Red Green Blue) format, or in HTML HEX code.
Below are the TYPES OF LINE with their names:
How to set borders on an element? We do as follows:
#block (
border: 3px solid # 0085cc; / * set a 3px blue line * /
}
If you want to install one-two-three frames from a certain side, then we indicate it like this:
border-top- frame on top;
border-bottom- frame at the bottom;
border-left- frame on the left;
border-right- the frame on the right;
Block (
border-right: 3px solid # 0085cc;
border-bottom: 2px dashed # 0085cc;
}
If you want to remove frames element in CSS, then write in the property border - none
Empty (
border: none; / * element with class empty will not have a border * /
}
outline
Outline is the property you need to set the outer border of an element.
There is two differences from border:
First, the line given in the outline will NOT affect the position of the box itself, its width and height.
Secondly, there is no possibility of installing a frame from a certain side.
The syntax is the same as border.
outline: 2px dotted # 0085cc; / * 2 pixel dotted blue border * /
For outline, as well as for border, you can remove borders by typing none:
Thank you for the attention!
Previous article
Lesson 6.
The bounds of the element.
Padding and margins in CSS. What are margin and padding? Next article
Lesson 8. How to set the text color and background of an element in CSS?
Comments on the article (vk.com)
border
Browser support
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Description
The CSS property allows you to simultaneously set the width, style and color for the border of the block. The block border is a regular line / frame that surrounds the block on all sides. It should be borne in mind that when you add a border, it will affect the overall size of the block.
The values are separated by a space and can be in any order, the browser will determine which one matches the required parameter. All three values are optional, the width and / or color can be omitted, in which case the value set for the default property will be used instead of the missing value, i.e. if, for example, no width is specified, then the property's default value will be used. The table below the syntax contains the values of which properties you can use.
Note: To set borders only on certain sides of an element, use the following properties: border-top, border-bottom, border-left, border-right.
Tip: Generally, when using a border, you need to add padding.
CSS property: border
They add white space between the frame of the block and its content: text, images, or child tags. Usually the border is displayed close to the content of the element, this is useful only if you need to set a border around the picture.
Syntax
border: border-width border-style border-color | inherit;
Property values
Example
There is some text here.
The result of this example in a browser window:
How to set the color, style and size of the border in the boxes.
In markup languages, the border ( border), have only tables, pictures and frames, in some cases it is possible to set the border color and that's it.
Border attribute
Cascading style sheets give us more options, but first things first.
In CSS, we can control the width of the border with border-width, or to be more precise, we can control the thickness of each side separately:
border-top-width- the thickness of the top border
border-right-width- thickness of the right border
border-bottom-width- the thickness of the lower border
border-left-width- left border thickness
But there can also be a shorthand form:
P (border-width: top right bottom left;)(top right bottom left).
Curb width can be set:
figures DIV (border-width: 5px), from zero to infinity, i.e. positive.
thin- thin border, DIV (border-width: thin)
medium- medium border, DIV (border-width: medium)
thick- thick border, DIV (border-width: thick)
It is clear with numbers, but with these values it all depends on the browser, but still thin<= medium <= thick
.
We can also control the color of the border with border-color or to be more precise with the color of each side:
border-top-color top border color;
border-right-color right border color;
border-bottom-color lower border color;
border-left-color the color of the border on the left side.
The color value is set as for color, i.e. one of 16 colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white or yellow, also colors can be set: color: # 000000, color: # AF0 , color: rgb (255,0,0) or color: rgb (100%, 0%, 0%).
No matter what color scheme you choose, browsers will still translate it to color: rgb (255,0,0)... For example color: lime = color: # 00ff00 = color: # 0F0 = color: rgb (0%, 100%, 0%), but for the browser it doesn't matter color: rgb (0,255,0), i.e. it will calculate this value.
If the thickness and color of the border can be controlled by HTML, then the style ( border-style) CSS only !!!
The style can be controlled by each side separately:
border-top-style top border style;
border-right-style right border style;
border-bottom-style bottom border style;
border-left-style the style of the border on the left side.
Now let's look at the style values:
1)border-style: none- This is the default, similar to border-width: 0.
2)border-style: hidden- Same, except for tables, which we will look at later.
3)border-style: dotted- Dotted border.
4)border-style: dashed- Dotted line border.
5)border-style: solid- Solid line border, i.e. as in HTML.
6)border-style: double- Double solid line border, here you need a border-width of at least 3pixels.
7)border-style: groove- The border looks like it was cut into the canvas.
8)border-style: ridge- The border looks like protruding from the canvas.
9)border-style: inset- The whole box looks like it is pressed into the canvas.
10)border-style: outset- Opposite to the previous one.
Some browsers may ignore the values: dotted, dashed, double, groove, ridge, inset and outset and output them as solid, i.e. the usual border.
All of course this is so, but all the examples above are only a principle of operation, not a mechanism.
Rule property border implies (border: size style color;), this rule is executed if all three values are present and only in this order, for example H1 (border: 5px double red;), but there may be exceptions if these values are provided by markup languages, for example, for a table TABLE (border: 2px), i.e. only one value is specified.
In order to manage not the entire curb, but each part separately, there are rules:
(border-top: size style color;) Upper curb control;
(border-right: size style color;) Curb control on the right;
(border-bottom: size style color;) Lower curb control;
(border-left: size style color;) Curb control on the left.
These rules can be used separately or all together.
The exception is this rule:
H1 (
border: 4px solid green;
}
The thing is that in CSS the last rule has the highest priority, in this case the border property contains border-left and therefore the border-left rule will be ignored, right like this:
H1 (
border: 4px solid green;
border-left: 2px double red;
}
From the beginning, we set the rules for the entire curb, and then for individual areas.
I have everything on the borders for the elements, except that we will consider some properties when we get to tables and other exceptions.
CSS: border. The bounds of the element.
CSS3 Borders
CSS3 Borders
With CSS3, you can create rounded borders, add shadows to containers, and use an image as a border - all without using a design program like Photoshop.
In this tutorial, you will learn about the following border properties:
Browser Support
| Property | Browser Support |
|---|---|
| border-radius | |
| box-shadow | |
| border-image |
Internet Explorer 9 supports some of the new border properties.
Firefox requires the -moz- prefix for border-image.
Chrome and Safari require the -webkit- prefix for border-image.
Opera requires the -o- prefix for border-image.
Safari also requires the -webkit- prefix for box-shadow.
Opera supports new border properties.
CSS3 Rounded Corners
Adding rounded corners to CSS2 was tricky. We had to use different images for each corner.
In CSS3, creating rounded corners is easy.
In CSS3, the border-radius property is used to create rounded corners:
This block has rounded corners!
CSS3 Box Shadow
In CSS3, the box-shadow property is used to add shadows to containers:
CSS3 Border-Image
With the CSS3 border-image property, you can use an image to create a border:
The border-image property allows you to specify a border-image!
The original image used to create the border is yours:
New Border Properties
Border attribute
Border attribute, tag
