Html style border solid font css

твердый, сплошной, прочный, основательный — прил

Синтаксис solid

Добавляется толщина в единицах измерения, в данном случае пиксели — 1px.

Начертание нашего бордюра — solid — сплошной.

Пример использования solid в css

Для того, чтобы продемонстрировать, как это будет в сборе в html теге, нам понадобится пример, разберем его в следующем пункте:

Задаем solid через атрибут style

Когда требуется использование точечно, т.е. в одном месте используется атрибут style attribute style внутри тега.

Сразу перейдем к практике:

Для того, чтобы разобрать пример нам понадобится какой-то блок, пусть это будет div :

Внутрь помещаем атрибут style:

Результат применения значения solid через атрибут style

Данный вариант использования значения solid применяется точечно в одном месте. когда нет повторений на странице.

Задаем solid через тег style

Не будем долго ломать голову и используем тоже див :

В отличии от предыдущего пункта, создаем тег style style

Создаем класс — «example_solid», он у нас будет размещаться и в теге «div», а в теге «style» будут прописаны свойства данного класса, класс задается точкой, внутри класса помещаем ранее использованные свойства и значение нашего «солида»

Результат применения значения solid через атрибут style

Данный вариант использования значения solid применяется на одной, или нескольких страницах, когда есть повторения на странице.

Задаем solid через файл css

Следующий вариант использования значения solid — в файле css file css — абсолютно аналогично предыдущему пункту, только с той разницей, что класс располагается в файле css!

Для этого вам потребуется:

Расположить выше приведенные стили в созданном файле css.

Данный вариант использования значения solid применяется в том случае, когда требуется данный эффект распространить на весь сайт.

Источник

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element’s border.

I have borders on all sides.

I have a red bottom border.

I have a blue left border.

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

dotted — Defines a dotted border
dashed — Defines a dashed border
solid — Defines a solid border
double — Defines a double border
groove — Defines a 3D grooved border. The effect depends on the border-color value
ridge — Defines a 3D ridged border. The effect depends on the border-color value
inset — Defines a 3D inset border. The effect depends on the border-color value
outset — Defines a 3D outset border. The effect depends on the border-color value
none — Defines no border
hidden — Defines a hidden border

Читайте также: Symfony php app console

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

Demonstration of the different border styles:

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!

Источник

Все о свойстве border

Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?

Основы

border-width: thick; border-style: solid; border-color: black;

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

Border-Radius

border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Для каждого угла можно назначить свое закругление:

border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;

В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:

/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;

Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

Несколько границ

Border-Style

solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

border: 20px groove #e3e3e3;

border-color: #e3e3e3; border-width: 20px; border-style: groove;

Outline

Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.

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

.box < width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; >/* Create two boxes with the same width of the container */ .box:after, .box:before < content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; >.box:after < border: 5px solid red; outline: 5px solid yellow; >.box:before

Возможно это не самое элегантное решение, однако оно работает

Box-Shadow

Изменение углов

border-radius: 50px / 100px; /* horizontal radius, vertical radius */

border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

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

CSS фигуры

Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

А теперь оставляем только синий треугольник:

Создание Speech Bubble

Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

Оставляем только четверть квадратика:

Теперь перемещаем ниже и закрашиваем:

.speech-bubble < /* … other styles */ border-radius: 10px; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ >

Примеры применения:

/* Speech Bubbles Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION Hi there
 */ .speech-bubble < position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; >/* Position the Arrow */ .speech-bubble-top:after < border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; >.speech-bubble-right:after < border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px; >.speech-bubble-bottom:after < border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; >.speech-bubble-left:after

Вертикальное центрирование текста

минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

.speech-bubble < /* other styles */ display: table; >.speech-bubble p

Еще один пример нестандартного использования границ:

Итог

Использование параметра border не ограничивается одним лишь «1px solid black», с помощью границ можно создавать различные фигуры, причем достаточно один раз написать CSS-класс и применять его к множеству элементов на странице.

Источник

border-style

The border-style shorthand CSS property sets the line style for all four sides of an element’s border.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Keyword values */ border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; /* top and bottom | left and right */ border-style: dotted solid; /* top | left and right | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /* Global values */ border-style: inherit; border-style: initial; border-style: revert; border-style: revert-layer; border-style: unset;

The border-style property may be specified using one, two, three, or four values.

When one value is specified, it applies the same style to all four sides.
When two values are specified, the first style applies to the top and bottom, the second to the left and right.
When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).

Each value is a keyword chosen from the list below.

Values

Describes the style of the border. It can have the following values:

Like the hidden keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.

Читайте также: Php final static class

Like the none keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won’t be displayed.

Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side’s border-width .

Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

Displays a single, straight, solid line.

Displays two straight lines that add up to the pixel size defined by border-width .

Displays a border with a carved appearance. It is the opposite of ridge .

Displays a border with an extruded appearance. It is the opposite of groove .

Displays a border that makes the element appear embedded. It is the opposite of outset . When applied to a table cell with border-collapse set to collapsed , this value behaves like ridge .

Displays a border that makes the element appear embossed. It is the opposite of inset . When applied to a table cell with border-collapse set to collapsed , this value behaves like groove .

Formal definition

border-top-style : none
border-right-style : none
border-bottom-style : none
border-left-style : none

border-bottom-style : as specified
border-left-style : as specified
border-right-style : as specified
border-top-style : as specified

Formal syntax

border-style =

Examples

All property values

Here is an example of all the property values.

HTML

pre class="b1">nonepre> pre class="b2">hiddenpre> pre class="b3">dottedpre> pre class="b4">dashedpre> pre class="b5">solidpre> pre class="b6">doublepre> pre class="b7">groovepre> pre class="b8">ridgepre> pre class="b9">insetpre> pre class="b10">outsetpre>

CSS

pre  height: 80px; width: 120px; margin: 20px; padding: 20px; display: inline-block; background-color: palegreen; border-width: 5px; box-sizing: border-box; > /* border-style example classes */ .b1  border-style: none; > .b2  border-style: hidden; > .b3  border-style: dotted; > .b4  border-style: dashed; > .b5  border-style: solid; > .b6  border-style: double; > .b7  border-style: groove; > .b8  border-style: ridge; > .b9  border-style: inset; > .b10  border-style: outset; >

Result

Specifications

Browser compatibility

BCD tables only load in the browser

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Html style border solid font css