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

Css design for border

Содержание
  1. CSS Borders
  2. CSS Border Style
  3. Example
  4. 43 CSS Borders
  5. Related Articles
  6. Author
  7. Links
  8. Made with
  9. About a code
  10. Animated Border Image
  11. Author
  12. Links
  13. Made with
  14. About a code
  15. Partial Gradient Border
  16. Author
  17. Links
  18. Made with
  19. About a code
  20. Gradient Border with Rounded Corners
  21. Author
  22. Links
  23. Made with
  24. About a code
  25. Background Border
  26. Author
  27. Links
  28. Made with
  29. About a code
  30. Patterned Borders
  31. Author
  32. Links
  33. Made with
  34. About a code
  35. Custom Dashed Border
  36. Author
  37. Links
  38. Made with
  39. About a code
  40. Colorful Border
  41. Author
  42. Links
  43. Made with
  44. About a code
  45. Gradient Border Effect
  46. Author
  47. Links
  48. Made with
  49. About a code
  50. Gradient Border + Transparent Background
  51. Author
  52. Links
  53. Made with
  54. About a code
  55. Border Linear-Gradient + Border-Radius
  56. Author
  57. Links
  58. Made with
  59. About a code
  60. Corner-only Border
  61. Author
  62. Links
  63. Made with
  64. About a code
  65. 8bit border-image
  66. Author
  67. Links
  68. Made with
  69. About a code
  70. 8-bit Pixel Border
  71. Author
  72. Links
  73. Made with
  74. About a code
  75. Avatar Border Effect. 15 Declarations, 1 Element, No Pseudos
  76. Author
  77. Links
  78. Made with
  79. About a code
  80. Use SVG for border-image
  81. Author
  82. Links
  83. Made with
  84. About a code
  85. CSS Gradient Borders
  86. Author
  87. Links
  88. Made with
  89. About a code
  90. Borders & Gradients
  91. Author
  92. Links
  93. Made with
  94. About a code
  95. Multiple Border-Radius Values
  96. Author
  97. Links
  98. Made with
  99. About a code
  100. CSS Candy Stripe Border Using Clip-Path
  101. Author
  102. Links
  103. Made with
  104. About a code
  105. Offset and XOR Frame: Lively
  106. Author
  107. Links
  108. Made with
  109. About a code
  110. Full Screen Vintage Frame with Multiple Borders
  111. Author
  112. Links
  113. Made with
  114. About a code
  115. Gradient Border
  116. Author
  117. Links
  118. Made with
  119. About a code
  120. Pure CSS Circular Border Patterns
  121. Author
  122. Links
  123. Made with
  124. About a code
  125. Fitted Border Image the Easy Way
  126. Author
  127. Links
  128. Made with
  129. About a code
  130. Map-Inspired Border
  131. Author
  132. Links
  133. Made with
  134. About a code
  135. Blurred Border
  136. Author
  137. Links
  138. Made with
  139. About the code
  140. Magic Borders
  141. Author
  142. Links
  143. Made with
  144. About the code
  145. Interactive Button Border
  146. Author
  147. Все о свойстве border
  148. Основы
  149. Border-Radius
  150. Несколько границ
  151. Изменение углов
  152. CSS фигуры
  153. Создание Speech Bubble
  154. Итог
Читайте также:  Python http response with file

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

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!

Источник

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.

Author

Made with

About a code

Animated Border Image

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

Demo image: Partial Gradient Border

Author

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

Demo image: Gradient Border with Rounded Corners

Author

Made with

About a code

Gradient Border with Rounded Corners

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

Demo image: Background Border

Author

Made with

About a code

Background Border

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

Demo image: Patterned Borders

Author

Made with

About a code

Patterned Borders

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

Demo image: Custom Dashed Border

Author

Made with

About a code

Custom Dashed Border

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

Demo image: Colorful Border

Author

Made with

About a code

Colorful Border

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

Author

Made with

About a code

Gradient Border Effect

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

Demo image: Gradient Border + Transparent Background

Author

Made with

About a code

Gradient Border + Transparent Background

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

Demo image: Border Linear-Gradient + Border-Radius

Author

Made with

About a code

Border Linear-Gradient + Border-Radius

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

Demo image: Corner-only Border

Author

Made with

About a code

Corner-only Border

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

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

Demo image: 8bit border-image

Author

Made with

About a code

8bit border-image

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

Demo image: 8-bit Pixel Border

Author

Made with

About a code

8-bit Pixel Border

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

Author

Made with

About a code

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

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

Author

Made with

About a code

Use SVG for border-image

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

Demo image: CSS Gradient Borders

Author

Made with

About a code

CSS Gradient Borders

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

Demo image: Borders & Gradients

Author

Made with

About a code

Borders & Gradients

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

Demo image: Multiple Border-Radius Values

Author

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

Demo image: CSS Candy Stripe Border Using Clip-Path

Author

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

Demo image: Offset and XOR Frame: Lively

Author

Made with

About a code

Offset and XOR Frame: Lively

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

Demo image: Full Screen Vintage Frame with Multiple Borders

Author

Made with

About a code

Full Screen Vintage Frame with Multiple Borders

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

Demo image: Gradient Border

Author

Made with

About a code

Gradient Border

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

Demo image: Pure CSS Circular Border Patterns

Author

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

Made with

About a code

Fitted Border Image the Easy Way

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Map-Inspired Border

Author

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

Demo image: Blurred Border

Author

Made with

About a code

Blurred Border

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

Author

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

Made with

About the code

Interactive Button Border

Button with an interactive border gradient.

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

Demo image: Gradient Border

Author

Источник

Все о свойстве 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-класс и применять его к множеству элементов на странице.

Источник

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