Custom borders with css

border

The border shorthand CSS property sets an element’s border. It sets the values of border-width , border-style , and border-color .

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* Global values */ border: inherit; border: initial; border: revert; border: revert-layer; border: unset; 

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The border will be invisible if its style is not defined. This is because the style defaults to none .

Values

Sets the thickness of the border. Defaults to medium if absent. See border-width .

Sets the style of the border. Defaults to none if absent. See border-style .

Sets the color of the border. Defaults to currentcolor if absent. See border-color .

Description

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border cannot be used to specify a custom value for border-image , but instead sets it to its initial value, i.e., none .

The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width , border-style , and border-color properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start ) border properties.

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

• Outlines never take up space, as they are drawn outside of an element’s content.
• According to the spec, outlines don’t have to be rectangular, although they usually are.

Formal definition

• border-width : as each of the properties of the shorthand:
  • border-top-width : medium
  • border-right-width : medium
  • border-bottom-width : medium
  • border-left-width : medium
  • border-top-style : none
  • border-right-style : none
  • border-bottom-style : none
  • border-left-style : none
  • border-top-color : currentcolor
  • border-right-color : currentcolor
  • border-bottom-color : currentcolor
  • border-left-color : currentcolor
  • border-width : as each of the properties of the shorthand:
    • 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-style : as specified
    • border-left-style : as specified
    • border-right-style : as specified
    • border-top-style : as specified
    • border-bottom-color : computed color
    • border-left-color : computed color
    • border-right-color : computed color
    • border-top-color : computed color
    • border-color : as each of the properties of the shorthand:
      • border-bottom-color : a color
      • border-left-color : a color
      • border-right-color : a color
      • border-top-color : a color
      • border-bottom-width : a length
      • border-left-width : a length
      • border-right-width : a length
      • border-top-width : a length

      Formal syntax

      border =
      ||
      ||

      =
      |
      thin |
      medium |
      thick

      =
      none |
      hidden |
      dotted |
      dashed |
      solid |
      double |
      groove |
      ridge |
      inset |
      outset

      Examples

      Setting a pink outset border

      HTML

      div>I have a border, an outline, and a box shadow! Amazing, isn't it?div> 

      CSS

      div  border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; > 

      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 Jul 18, 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.

      Источник

      43 CSS Borders

      Collection of hand-picked free HTML and CSS border code examples from Codepen, GitHub and other resources. Update of May 2021 collection. 15 new items.

      Related Articles

      Author

      Links

      Made with

      About a code

      Animated Border Image

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Partial Gradient Border

      Partial gradient border surrounding a circle image, which is done with a CSS conic gradient and a radial gradient mask.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Gradient Border with Rounded Corners

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Background Border

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Patterned Borders

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Custom Dashed Border

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Colorful Border

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Links

      Made with

      About a code

      Gradient Border Effect

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Gradient Border + Transparent Background

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Border Linear-Gradient + Border-Radius

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Corner-only Border

      Corner-only border (allows for corner rounding & gradient border).

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      8bit border-image

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      8-bit Pixel Border

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Links

      Made with

      About a code

      Avatar Border Effect. 15 Declarations, 1 Element, No Pseudos

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Links

      Made with

      About a code

      Use SVG for border-image

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      CSS Gradient Borders

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Borders & Gradients

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Multiple Border-Radius Values

      You probably knew that you can set the border-radius of an element to 4 values, and using shorthand, it goes clock-wise from top, right, bottom, left. But did you know you can actually set up to 8 values if you separate them? Each corner can have 2 values as you can see in this example.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      CSS Candy Stripe Border Using Clip-Path

      Create a responsive candy stripe border using the clip-path property on each of the list items in a ul . Change the height, background color, and stripe color very easily.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Offset and XOR Frame: Lively

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Full Screen Vintage Frame with Multiple Borders

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Gradient Border

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Pure CSS Circular Border Patterns

      The border patterns are created with clip-path on a pseudo-element.

      Compatible browsers: Chrome, Firefox, Opera, Safari

      Author

      Links

      Made with

      About a code

      Fitted Border Image the Easy Way

      Compatible browsers: Chrome, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Map-Inspired Border

      Map-inspired border effect using stacked border & box-shadows . Single HTML element with CSS.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Links

      Made with

      About a code

      Blurred Border

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Links

      Made with

      About the code

      Magic Borders

      Try to have a dynamic and responsive table that has borders only between cells.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      Author

      Links

      Made with

      About the code

      Interactive Button Border

      Button with an interactive border gradient.

      Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

      

      Author

      Источник

      Как создать рамку вокруг элемента. CSS-свойство border

      CSS-свойство border используется для задания стиля, толщины и цвета границы элемента. Граница — это линия, которая окружает элемент и отделяет его контент от соседних элементов. С помощью свойства border можно создавать различные рамки — от простых одноцветных линий до сложных узоров и теней.

      В общем виде свойство записывается так:

      border-width — задаёт толщину границы.

      border-style — устанавливает стиль рамки.

      border-color — определяет цвет рамки.

      

      Значения свойства border

      Border-width

      Свойство border-width определяет толщину рамки и может быть задано в пикселях ( px ), процентах ( % ) или описано ключевым словом — thin , medium , thick .

      • thin — тонкая граница, обычно около одного пикселя.
      • medium — средняя граница, около трёх пикселей.
      • thick — толстая граница, примерно пять пикселей.

      Border-style

      border-style — задаёт стиль границы и может принимать одно из значений — none , hidden , dotted , dashed , solid , double , groove , ridge , inset , outset .

      hidden — граница скрыта, но она занимает место.

      solid — сплошная линия границы.

      groove — объёмная рифлёная вдавленная рамка.

      ridge — объёмная рифлёная выпуклая рамка.

      inset — объёмная вдавленная рамка.

      outset — объёмная выпуклая рамка.

      Border-color

      border-color — определяет цвет рамки и может быть задан в виде ключевого слова, соответствующего названию цвета, hex-кода, rgb или hls значений. Значение currentColor использует текущий цвет текста в качестве цвета границы.

      Наследование

      Свойство border не наследуется от родительских элементов. Граница, заданная для одного элемента, не будет применяться к его дочерним элементам.

      ⭐ Свойство border поддерживается современными браузерами. Актуальная информация — на caniuse.com.

      Для чего использовать свойство border

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

      Созданиетенейили выделений. Свойство border можно комбинировать с другими свойствами, такими как box-shadow или outline , для создания различных эффектов теней или выделений.

      Разделение разных частей элемента. С помощью свойства border можно разделять различные части элемента, например, заголовок и содержимое блока.

      Нюансы

      Если нужно задать отдельные значения для каждой стороны границы, рекомендуется использовать отдельные свойства border-top , border-right , border-bottom и border-left .

      

      Для создания рамок с закруглёнными углами используют свойство border-radius .

      

      Чем заменить свойство

      Для создания более сложных границ или декоративных элементов можно использовать свойства box-shadow , outline или border-image .

      Материалы по теме

      «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

      Источник