Главная » Языки программирования

Css class border none

Содержание
  1. border-style
  2. Try it
  3. Constituent properties
  4. Syntax
  5. Values
  6. Formal definition
  7. Formal syntax
  8. Examples
  9. All property values
  10. HTML
  11. CSS
  12. Result
  13. Specifications
  14. Browser compatibility
  15. See also
  16. Found a content problem with this page?
  17. MDN
  18. Support
  19. Our communities
  20. Developers
  21. border
  22. Синтаксис
  23. Значения
  24. Обычный синтаксис
  25. Примеры
  26. HTML
  27. CSS
  28. Результат
  29. Спецификация
  30. Совместимость браузеров
  31. Также смотрите
  32. Found a content problem with this page?
  33. Tailwind CSS class: .border-none
  34. Check .border-none in a real project
  35. CSS source
  36. More in Tailwind CSS Borders

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).
Читайте также:  What is root directory in php

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.

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 =

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

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

See also

Found a content problem with this page?

This page was last modified on Jun 30, 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.

Источник

border

Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, border не может быть использован для указания пользовательского значения border-image (en-US), но вместо этого устанавливает его в начальное значение, т.е. none .

border: 1px; border: 2px dotted; border: medium dashed green;

Примечание: Рекомендуется использовать border , когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width , border-style (en-US), и border-color (en-US) принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.

Синтаксис

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

Значения

Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width .

Стиль линии границ. По умолчанию none если отсутствует. Больше информации border-style (en-US).

Цвет границ. По умолчанию принимает значение свойства элементов color (en-US). Больше информации border-color (en-US).

Обычный синтаксис

border =
|| (en-US)
|| (en-US)

=
| (en-US)
thin | (en-US)
medium | (en-US)
thick

=
none | (en-US)
hidden | (en-US)
dotted | (en-US)
dashed | (en-US)
solid | (en-US)
double | (en-US)
groove | (en-US)
ridge | (en-US)
inset | (en-US)
outset

Примеры

HTML

div class="fun-border">Look at my borders.div> p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!p> style contenteditable> .fun-border  border: 2px solid red; > style>

CSS

style  display: block; border: 1px dashed black; >

Результат

Спецификация

  • border-width : как и у каждого из подсвойств этого свойства:
    • border-top-width (en-US): medium
    • border-right-width (en-US): medium
    • border-bottom-width (en-US): medium
    • border-left-width (en-US): medium
    • border-top-style (en-US): none
    • border-right-style (en-US): none
    • border-bottom-style (en-US): none
    • border-left-style (en-US): none
    • border-top-color (en-US): currentcolor
    • border-right-color (en-US): currentcolor
    • border-bottom-color (en-US): currentcolor
    • border-left-color (en-US): currentcolor
    • border-width : как и у каждого из подсвойств этого свойства:
      • border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
      • border-left-width (en-US): абсолютная длина или 0 , если border-left-style (en-US) — none или hidden
      • border-right-width (en-US): абсолютная длина или 0 , если border-right-style (en-US) — none или hidden
      • border-top-width (en-US): абсолютная длина или 0 , если border-top-style (en-US) — none или hidden
      • border-bottom-style (en-US): как указано
      • border-left-style (en-US): как указано
      • border-right-style (en-US): как указано
      • border-top-style (en-US): как указано
      • border-bottom-color (en-US): вычисленный цвет
      • border-left-color (en-US): вычисленный цвет
      • border-right-color (en-US): вычисленный цвет
      • border-top-color (en-US): вычисленный цвет
      • border-color (en-US): как и у каждого из подсвойств этого свойства:
        • border-bottom-color (en-US): цвет
        • border-left-color (en-US): цвет
        • border-right-color (en-US): цвет
        • border-top-color (en-US): цвет
        • border-bottom-width (en-US): длина
        • border-left-width (en-US): длина
        • border-right-width (en-US): длина
        • border-top-width (en-US): длина

        Совместимость браузеров

        BCD tables only load in the browser

        Также смотрите

        Found a content problem with this page?

        This page was last modified on 11 февр. 2023 г. by MDN contributors.

        Your blueprint for a better internet.

        Источник

        Tailwind CSS class: .border-none

        Check .border-none in a real project

        Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

        CSS source

        More in Tailwind CSS Borders

        • .border-solid
        • .border-dashed
        • .border-dotted
        • .border-double
        • .border
        • .border-0
        • .border-2
        • .border-4
        • .border-8
        • .border-*-# / .border-t-2
        • .border-opacity-25 / border-*-#
        • .divide-x
        • .divide-x-0
        • .divide-x-2
        • .divide-x-4
        • .divide-x-8
        • .divide-y
        • .divide-y-0
        • .divide-y-2
        • .divide-y-4
        • .divide-y-8
        • .divide-gray-100 / .divide-*-#
        • .divide-x-reverse / .divide-*-reverse
        • .divide-opacity-25 / .divide-opacity-*
        • .border-collapse
        • .border-separate
        • .rounded / .rounded-*
        • .border-b
        • .border-b-0
        • .border-blue-50
        • .border-gray-50
        • .border-green-50
        • .border-indigo-50
        • .border-l
        • .border-l-0
        • .border-opacity-0
        • .border-pink-50
        • .border-purple-50
        • .border-r
        • .border-r-0
        • .border-red-50
        • .border-t
        • .border-t-0
        • .border-yellow-50
        • .rounded-2xl
        • .rounded-3xl
        • .rounded-b-2xl
        • .rounded-b-3xl
        • .rounded-b-xl
        • .rounded-bl-2xl
        • .rounded-bl-3xl
        • .rounded-bl-xl
        • .rounded-br-2xl
        • .rounded-br-3xl
        • .rounded-br-xl
        • .rounded-l-2xl
        • .rounded-l-xl
        • .rounded-r-2xl
        • .rounded-r-3xl
        • .rounded-r-xl
        • .rounded-t-2xl
        • .rounded-t-3xl
        • .rounded-t-xl
        • .rounded-tl-2xl
        • .rounded-tl-3xl
        • .rounded-tl-xl
        • .rounded-tr-2xl
        • .rounded-tr-3xl
        • .rounded-tr-xl
        • .rounded-xl
        Tailwind CSS

        Tailwind Builder is a product of Shuffle and is not affiliated with Tailwind CSS or Tailwind Labs.

        Источник

Оцените статью
© 2024 Программирование