Красивый border css примеры

Свойство CSS border

Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.

1. Синтаксис CSS border

border: border-width border-style border-color | inherit;

• border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
• border-style — стиль выводимой рамки. Может принимать следующие значения
  • none или hidden — отменяет границу
  • dotted — рамка из точек
  • dashed — рамка из тире
  • solid — простая линия (применяется чаще всего)
  • double — двойная рамка
  • groove — рифленая 3D граница
  • ridge , inset , outset — различные 3D эффекты рамки
  • inherit — применяется значение родительского элемента

  Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

  2. Примеры с различными границами рамок CSS border

  2.1. Пример. Разные стили оформления границы рамки border-style

  html> head> style> .border_style_dotted< border: 2px dotted #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_dashed< border: 2px dashed #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_solid< border: 2px solid #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_double< border: 2px double #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_groove< border: 5px groove #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_ridge< border: 5px ridge #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_inset< border: 5px inset #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_outset< border: 5px outset #1E90FF; padding: 3px; margin-bottom: 5px; > .border_complex< border-left: 5px solid #1E90FF; border-right: 5px dotted #1E90FF; border-top: 5px double #1E90FF; border-bottom: 5px dashed #1E90FF; padding: 3px; margin-bottom: 5px; > /style> /head> body> div class css">border_style_dashed">border-style: dashed/div> div class css">border_style_dashed">border-style: dashed/div> div class css">border_style_solid">border-style: solid/div> div class css">border_style_double">border-style: double/div> div class css">border_style_groove">border-style: groove/div> div class css">border_style_ridge">border-style: ridge/div> div class css">border_style_inset">border-style: inset/div> div class css">border_style_outset">border-style: outset/div> div class css">border_complex">Четыре разных рамки/div> /body> /html>

  Вот как это выглядит на странице:

  2.2. Пример. Изменения цвета рамки при наведении курсора мыши

  Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

  html> head> style> .border_hover< border: 2px solid #1E90FF; padding: 5px; width: 500px; height: 60px; > .border_hover:hover< border: 2px solid #F0F; padding: 5px; > /style> /head> body> div class css">border_hover">При наведении курсора мыши на блок цвет рамки изменится/div> /body> /html>

  Вот как это выглядит на странице:

  2.3. Пример. Как сделать прозрачную рамку border

  Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

  html> head> style> .opacity_border< border: 10px solid rgba(80, 55, 80, 0.5); background: url('img/primer-fona.jpg'); width: 130px; height: 116px; > /style> /head> body> div class css">opacity_border"> /div> /body> /html>

  Вот как это выглядит на странице:

  3. Толщина границы: свойство border-width

  Задает толщину линии. Ранее мы задавали ее в едином описании border.

  Синтаксис CSS border-width

  border-width: thin | medium | thick | значение;

  • thin — тонкая толщина линии
  • medium — средняя толщина линии
  • thick — толстая толщина линии

  Ниже приведены несколько примеров. Самым необычным будет — это разная толщина границы у каждой стороны.

  html> head> style> .border_width_thin< border-style: solid; border-color: #1E90FF; border-width: thin; > .border_width_medium< border-style: solid; border-color: #1E90FF; border-width: medium; > .border_width_thick< border-style: solid; border-color: #1E90FF; border-width: thick; > .border_width< border-style: solid; border-color: #1E90FF; border-width: 1px 2px 3px 4px; > /style> /head> body> div class css">border_width_thin">border-width: thin/div> div class css">border_width_medium">border-width: medium/div> div class css">border_width_thick">border-width: thick/div> div class css">border_width">Разная толщина у границ/div> /body> /html>

  Вот как это выглядит на странице:

  4. Как сделать рамку border только с одного края (границы)

  У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

  • border-top — для задания рамки сверху (верхняя граница)
  • border-bottom — для задания рамки снизу (нижняя граница)
  • border-right — для задания рамки справа (правая граница)
  • border-left — для задания рамки слева (левая граница)

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

  • border-top-color — задание цвета верхний границы
  • border-top-style — задание стиля верхней границы
  • border-top-width — задание толщины верхней границы
  • и т.д. для каждого направления

  На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

  /* Описание двух одинаковых стилей: */ style> .svoystvo1< border-top: 1px solid #DEB887; > .svoystvo2< border-top-color: #DEB887; border-top-style: solid; border-top-width: 1px; > /style>
   

  4.1. Пример. Красивая рамка для выделения цитат

  html> head> style> .primer_ramka_citata< width: 300px; height: 200px; border: 1px solid #DEB887; border-left: 2px dashed #006400; background: #EEE8AA; padding: 5px; margin-bottom: 5px; > /style> /head> body> div class css">primer_ramka_citata">Пример рамки для цитаты/div> /body> /html>

  Вот как это выглядит на странице:

  Примечание
  Можно задать отдельную границу для каждой из сторон.

  5. Как сделать несколько границ border у элемента html

  Иногда требуется сделать несколько границ. Приведем пример

  5.1. Первый вариант с несколькими границами

  html> head> style> .neskolko_granic < width: 200px; height: 200px; position: relative; border: 10px solid orange; > .neskolko_granic:after, .neskolko_granic:before < content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; > .neskolko_granic:after < border: 5px solid red; outline: 5px solid yellow; > .neskolko_granic:before < border: 10px solid green; > /style> /head> body> div class css">neskolko_granic"> /div> /body> /html>

  Вот как это выглядит на странице:

  Есть второй способ через наложение теней.

  5.2. Наложение теней для создания нескольких границ

  html> head> style> .neskolko_granic_2 < border: 5px solid red; width: 150px; height: 150px; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; > /style> /head> body> div class css">neskolko_granic_2"> /div> /body> /html>

  Вот как это выглядит на странице:

  6. Скругление углов у границ (border-radius)

  Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

  div style value2">width:200px; height:100px; border:3px solid #ae0; border-radius: 10px">div>

  Более подробно про свойство border-radius читайте в отдельной статье: как скруглить углы у рамок в HTML.

  7. Вдавленная линия CSS

  Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

  html> head> style> .vdavlennaya_liniya < border: 1px solid #222; border-bottom: 1px solid #333; > /style> /head> body> hr class css">vdavlennaya_liniya" /> /body> /html>

  Вот как это выглядит на странице:

  Для обращения к border из JavaScript нужно писать следующую конструкцию:

  [window.]document.getElementById("elementID").style.border value">VALUE"

  Источник

  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

  Источник