Можно ли закруглить углы у outline?
Собственно, в этом и вопрос. У border есть border-radius. У outline такого свойства нет (вернее, для FF есть -moz-outline-radius, но в других браузерах такое не работает).
Отслеживать
задан 27 июн 2017 в 13:14
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 47 47 бронзовых знаков
27 июн 2017 в 13:22
Как округлить outline я не знаю, но думаю что нельзя. Можно использовать box-shadow: 0 0 0 2px green.
27 июн 2017 в 13:25
@МузыкаСергей, с box-shadow каждый может )) Я думал, вдруг есть какое-то лайфхак с outline’м
27 июн 2017 в 13:27
caniuse.com/#search=outline-radius иногда помогает узнать можно или нет
27 июн 2017 в 14:42
@Shnur, этот ресурс помогает узнать, будет ли работать определённое свойство в том или ином браузере. Как закруглить углы у outline там не написано, увы
27 июн 2017 в 14:56
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Напишите в div outline: none , т.е. отмените его вообще, и задайте в div :focus c необходимым бордером и его радиусом.
Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
ответ дан 26 окт 2020 в 10:40
Dmitry_Iorzhev Dmitry_Iorzhev
11 2 2 бронзовых знака
Вы можете скопировать сниппет из вопроса и показать с ним, как это работает.
26 окт 2020 в 11:03
Я так понял, что вам нужно убрать квадратный outline к примеру у button, который появляется при клике на нее, в таком случае, я предлагаю просто убрать outline:none; и вместо него прописать :focus с border-radius
27 окт 2020 в 12:59
.button < width: 100px; height: 100px; border: 2px solid red; border-radius: 20px; outline:none; >.button:focus < border:2px solid green; border-radius: 20px; >
27 окт 2020 в 13:02
- html
- css
- border
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
outline
The outline CSS shorthand property sets most of the outline properties in a single declaration.
Try it
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* Global values */ outline: inherit; outline: initial; outline: revert; outline: revert-layer; outline: unset;
The outline property may be specified using one, two, or three of the values listed below. The order of the values does not matter. As with all shorthand properties, any omitted sub-values will be set to their initial value.
Note: The outline will be invisible for many elements if its style is not defined. This is because the style defaults to none . A notable exception is input elements, which are given default styling by browsers.
Values
Sets the color of the outline. Defaults to invert for browsers supporting it, currentcolor for the others. See outline-color .
Sets the style of the outline. Defaults to none if absent. See outline-style .
Sets the thickness of the outline. Defaults to medium if absent. See outline-width .
Description
Outline is a line outside of the element’s border. Unlike other areas of the box, outlines don’t take up space, so they don’t affect the layout of the document in any way.
There are a few properties that affect an outline’s appearance. It is possible to change the style, color, and width using the outline property, the distance from the border using the outline-offset property, and corner angles using the border-radius property.
An outline is not required to be rectangular: While dealing with multiline text, some browsers will draw an outline for each line box separately, while others will wrap the whole text with a single outline.
Accessibility concerns
Assigning outline a value of 0 or none will remove the browser’s default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.
- How to Design Useful and Usable Focus Indicators
- WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible
Formal definition
- outline-color : invert , for browsers supporting it, currentColor for the other
- outline-style : none
- outline-width : medium
- outline-color : For the keyword invert , the computed value is invert . For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn’t, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0) .
- outline-width : an absolute length; if the keyword none is specified, the computed value is 0
- outline-style : as specified
- outline-color : a color
- outline-width : a length
- outline-style : by computed value type
CSS outline Property
Set an outline around a element and a element:
h2 <
outline: 5px dotted green;
>
div.a outline: 2px dashed blue;
>
Definition and Usage
An outline is a line that is drawn around elements, outside the borders, to make the element «stand out».
The outline property is a shorthand property for:
- outline-width
- outline-style (required)
- outline-color
If outline-color is omitted, the color applied will be the color of the text.
Note: Outlines differ from borders! Unlike border, the outline is drawn outside the element’s border, and may overlap other content. Also, the outline is NOT a part of the element’s dimensions; the element’s total width and height is not affected by the width of the outline.
| Default value: | medium invert color |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Read about animatable Try it |
| Version: | CSS2 |
| JavaScript syntax: | object.style.outline=»#0000FF dotted 5px» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| outline | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
CSS Syntax
outline: outline-width outline-style outline-color|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| outline-width | Specifies the width of outline | Try it » |
| outline-style | Specifies the style of the outline | Try it » |
| outline-color | Specifies the color of the outline | Try it » |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
outline-style
The outline-style CSS property specifies the style of an element’s outline. What’s an outline? An is a line that is drawn around elements — outside the border edge — that is used for accessibility or decoration purposes when that element is in focus.
button
outline-style is a constituent property in the outline shorthand and is defined in the CSS Basic User Interface Module Level 4 specification which is currently in Editor’s Draft status.
We usually set the outline of an element using the shorthand property:
a:focus
By default, different user agents provide different outline styling on focused elements to help indicate non-mouse interactions for accessibility reasons, but that visual is generally beneficial to everyone. This styling is typically an outline around the element. There are some reasons why you would want to change the default outline style:
- You can set that style to match your brand.
- You can make the outline more noticeable.
- You can bring more attention to the user by changing the outline style on the element’s focus.
And this is when outline-styl e comes in handy. But make sure your custom style is, at the very least, as accessible as the default style. That means making it clear and noticeable, while not trying to steer too far that it no longer resembles a focus state. Eric Bailey has a lot of great advice on this in his “Focusing on Focus Styles” article.
outline-style: auto | /* where */ = none | dotted | dashed | solid | double | groove | ridge | inset | outset/* Keyword values */ outline-style: auto; outline-style: none; outline-style: dotted; outline-style: dashed; outline-style: solid; outline-style: double; outline-style: groove; outline-style: ridge; outline-style: inset; outline-style: outset; /* Global values */ outline-width: initial; outline-width: inherit; outline-width: unset; 
- auto : Allows user agents to draw a custom outline style on elements.
- none : The default value. Outline is not drawn. The computed value of outline-width is 0 .
- dotted : Draws a bunch of round dots around the element.
- dashed : Draws square-ended dashes around the element.
- solid : A single line wraps around the element.
- double : Draws two parallel solid lines along the element’s edge, with space between them. The thickness of the two lines and the gap between them is equal to the outline-width value. The outline-width must be at least 3px wide for the double outline to be visible.
- groove : The outline looks like it’s carved in the page. This carved effect usually comes from the color specified using the outline-color property, plus a slightly darker version of it that the browser figures out on its own.
- ridge : The opposite of groove , where the outline looks as if it’s coming off of the page.
- inset : Gives the element’s box an embedded appearance, as if the content inside of the outline is sinking into the page.
- outset : The opposite of inset , giving the element’s box an embossed appearance, as if the content inside of the outline is coming out of the page.
- initial : Applies the property’s default setting, which is none .
- inherit : Adopts the outline-style value of the parent.
- unset : Removes the current outline-style from the element.
The following example makes the outline of the button double once it’s focused:
button < outline-width: 1px; outline-style: solid; outline-color: lightblue; >button:focus
You can play around this property in the following demo: