Html form border width

border — width

Задаёт ширину рамки элемента. Часто указывается в шорткате, но иногда пригождается и отдельно.

Время чтения: меньше 5 мин

Обновлено 20 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство border — width управляет толщиной рамки элемента.

Пример

Скопировать ссылку «Пример» Скопировано

Для того чтобы увидеть работу свойства, необходимо помимо толщины рамки добавить ещё и значение свойства border — style .

 
Блок текста, обведённый рамкой p class="text">Блок текста, обведённый рамкойp>    Скопировать Скопировано Не удалось скопировать   

 .text  border-style: solid; border-width: 3px;> .text  border-style: solid; border-width: 3px; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Для задания толщины можно использовать три переменные — thin , medium или thick , в большинстве браузеров это соответствует размерам 2 px, 4 px и 6 px соответственно.

Сама же спецификация не приравнивает эти переменные к определённому размеру, а только говорит что значение thin должно быть меньше medium , а оно, в свою очередь, меньше thick , остальное контролируется на уровне браузера. Поэтому, для более точного значения, толщину можно указывать в пикселах или других единицах измерения .

Ключевое слово inherit наследует значение родителя, а initial применяет значение по умолчанию, равное medium .

Разрешается указывать одно, два, три или четыре значения. В зависимости от этого получится разный результат:

1. border — width : 1px — одно значение, толщина рамки со всех сторон одинаковая.
2. border — width : 1px 2px — два значения, первое устанавливает толщину рамки сверху и снизу, второе — слева и справа.
3. border — width : 1px 2px 3px — три значения, первое значение устанавливает толщину рамки сверху, второе — слева и справа, а третье — снизу.
4. border — width : 1px 2px 3px 4px — четыре значения, устанавливает для каждой стороны свою толщину, поочерёдно: для верхней, правой, нижней и левой рамки.

Чаще всего это свойство используется в шорткате border , так как обычно задаётся сразу и цвет и стиль и толщина рамки, а сокращённая форма позволяет сделать это более элегантно.

На этом демо можете посмотреть как выглядят разные размеры толщины рамки при разных значениях стиля рамки.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Значение по умолчанию medium .

💡 Можно анимировать, читайте подробнее про CSS — анимации .

💡 Поддерживается всеми современными браузерами.

Источник

border-width

The border-width shorthand CSS property sets the width of an element’s border.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Keyword values */ border-width: thin; border-width: medium; border-width: thick; /* values */ border-width: 4px; border-width: 1.2rem; /* top and bottom | left and right */ border-width: 2px 1.5em; /* top | left and right | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /* Global values */ border-width: inherit; border-width: initial; border-width: revert; border-width: revert-layer; border-width: unset; 

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

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

Values

Defines the width of the border, either as an explicit nonnegative or a keyword. If it’s a keyword, it must be one of the following values:

Note: Because the specification doesn’t define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick , and the values are constant within a single document.

Formal definition

• border-top-width : medium
• border-right-width : medium
• border-bottom-width : medium
• border-left-width : medium

• border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden
• border-left-width : the absolute length or 0 if border-left-style is none or hidden
• border-right-width : the absolute length or 0 if border-right-style is none or hidden
• border-top-width : the absolute length or 0 if border-top-style is none or hidden

• border-bottom-width : a length
• border-left-width : a length
• border-right-width : a length
• border-top-width : a length

Formal syntax

Examples

A mix of values and lengths

HTML

p id="one-value">one value: 6px wide border on all 4 sidesp> p id="two-values"> two different values: 2px wide top and bottom border, 10px wide right and left border p> p id="three-values"> three different values: 0.3em top, 9px bottom, and zero width right and left p> p id="four-values"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left p> 

CSS

#one-value  border: ridge #ccc; border-width: 6px; > #two-values  border: solid red; border-width: 2px 10px; > #three-values  border: dotted orange; border-width: 0.3em 0 9px; > #four-values  border: solid lightgreen; border-width: thin medium thick 1em; > p  width: auto; margin: 0.25em; padding: 0.25em; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

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.

Источник

Add border to the form

I wrote the following code to form creation,I have add some style to my form.Now I want to add border like this to my form.I tride,But unable to add it.
Can anyone help me to do this?

.details < background-color: #eb4e24; height: 800px; >input[type=text], #uexperience, #equalification, #roles < width: 86%; padding: 7px 7px; border: #c1c1c1 solid 1px; height: 40px; background: none; /*border-radius: 5px;*/ >select < width: 28%; height: 37px; padding: 0 1em; background: none; border: #c1c1c1 solid 1px; >.border < border: #dbdbdb solid 1px; >table td < padding: 10px; >input[type=file] < border: #c1c1c1 solid 1px; height: 40px; padding: 8px 7px; width: 86%; >label < color: red; >#captcha < width: 77%; >.fa < font-size: 2em !important; color: #fff; padding-left: 15px; >form < margin-top: 15%; /*border: 1px solid;*/ >

  
 
 
 
 
 
 
 
First Name * 
 
Email Address * 
 
Job position * 
 
Current Employer * 
 
 
 
 
 
 
 
 
 
Last Name * 
 
Mobile No. * 
 
Experience * 
 --------- Select Experience -------------- 1-2 Years 1-3 Years 2-4 Years 4-6 Years 6-10 Years > 10 Years  
 
 
 
Enter code Here * 
 
 
 
 
 
 

3 Answers 3

If you want to have a border in two colors you can use this little trick:

How does this work?

The borders to the right and left are real borders while the border at the top and bottom are really just an background image.

To make the «color-split» effect we are going to use a background-image as the top and bottom borders. We do that by making two identical gradients.

The first color starts from 0% and ends on 50% .

The second color starts from 50% and ends on 100%

We then use background-position to place the first gradient at the top, and the second at the bottom of the form .

To make our «fake borders» the same thickness as our «real borders» we’re using background-size to change the width and height, of the image.

Finally we are also setting the background to no-repeat . Else the gradient would fill the entire form and thereby destroy the border illusion.

But in your case there also is another simple way.

Since you use columns next to each other, you can just apply the borders to those, and have them in different colors, and hide the left-border on the right column, and the right-border at the left column. Like this:

To gain the best effect, you should set the same height to both of the columns, and apply the «split-color» background to the container of the columns, with a padding. Else the white border at the right column, would blend with the background.

UPDATE — Centered Headline

If you want to add a headline on the top border, so it looks like the text is overlaying you can do it like this:

The h1 centers the headline and have a background gradient, matching the one at the .container so it looks like, that a part has been cut out.

The span also uses a gradient as background, but reversed to its parent. Then uses background-clip: text and color: transparent to put the gradient over the text.

See full code in Fiddle below:

Источник

CSS Forms

The look of an HTML form can be greatly improved with CSS:

Styling Input Fields

Use the width property to determine the width of the input field:

Example

The example above applies to all elements. If you only want to style a specific input type, you can use attribute selectors:

• input[type=text] — will only select text fields
• input[type=password] — will only select password fields
• input[type=number] — will only select number fields
• etc..

Padded Inputs

Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add some margin , to add more space outside of them:

Example

Note that we have set the box-sizing property to border-box . This makes sure that the padding and eventually borders are included in the total width and height of the elements.
Read more about the box-sizing property in our CSS Box Sizing chapter.

Bordered Inputs

Use the border property to change the border size and color, and use the border-radius property to add rounded corners:

Example

If you only want a bottom border, use the border-bottom property:

Example

Colored Inputs

Use the background-color property to add a background color to the input, and the color property to change the text color:

Example

Focused Inputs

By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.

Use the :focus selector to do something with the input field when it gets focus:

Example

Example

Input with icon/image

If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we add a large left padding to reserve the space of the icon:

Example

input[type=text] <
background-color: white;
background-image: url(‘searchicon.png’);
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
>

Animated Search Input

In this example we use the CSS transition property to animate the width of the search input when it gets focus. You will learn more about the transition property later, in our CSS Transitions chapter.

Example

input[type=text] <
transition: width 0.4s ease-in-out;
>

input[type=text]:focus width: 100%;
>

Styling Textareas

Tip: Use the resize property to prevent textareas from being resized (disable the «grabber» in the bottom right corner):

Example

textarea <
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
>

Styling Select Menus

Example

select <
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
>

Styling Input Buttons

Example

input[type=button], input[type=submit], input[type=reset] <
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
>

/* Tip: use width: 100% for full-width buttons */

For more information about how to style buttons with CSS, read our CSS Buttons Tutorial.

Responsive Form

Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.

Advanced: The following example uses media queries to create a responsive form. You will learn more about this in a later chapter.

Aligned Form

An example of how to style labels together with inputs to create a horizontal aligned form:

Источник