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.
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 Border Radius
You may have heard and used the border property in CSS styling while preparing the HTML files to create a highlighted border around some elements around headings, tables, and paragraphs. When you add a border to any element, you can style it in different ways: create a solid, dotted, and dashed border, or outline it as well. The border-radius property lets you style the corners of a border. Within this guide, we will be discussing different examples to style the border corners using the outline and border-radius property.
Example 01:
Let’s get started with the most basic example of borders. In this example, we will be demonstrating the use of border property to create a simple border around an element used within the HTML code. The HTML code has been started with the Doctype “html” tag that will be closed at the end of the HTML program. After the html tag, we have been using the “head” tag and the body tag. The “head” tag will be utilizing the style tag to design our webpage.
Within the body tag, we have been using the heading “h1” which will be of the largest size in HTML headings. This heading contains only two words, “Border Radius”. Within the style tag, we are utilizing the h1 heading to style it a little. Within the curly brackets, we have been using the property “border” to create a border around the heading. We have specified the border width as 3 pixels solid and it will be red. The style and head tag are closed here. Let’s save and run this HTML script in the Visual Studio code and make it open within Google Chrome.
After the HTML code execution in the Visual Studio Code, the HTML webpage has been opened in the Chrome browser as shown below. This page has been displayed with heading 1 “Border Status” with its red border. This border is of width 3 pixels and it is solid red.
Until yet, we hadn’t discussed the border radius in our above illustration of HTML code. So, we have been using a total of 4 headings with different titles. As all the headings are size 1 headings, we need to differentiate them with classes. We have been specifying separate class names for both the headings, “a”, “b”, “c”, and “d”. Within the style tag of a head tag, the classes are defined to separately style both the headings. Although we have been styling both the headings quite similarly, it is necessary to separately do that and not mix them up. We have been creating a border around the first heading with a solid red color and it will be of width 3 pixels.
The same “border” property has been used for the other three heading containing classes “b”, “c”, and “d”. The only change is the solid blue color, solid green color, and solid orchid color instead of red color for the rest of the headings. After adding the 3 pixel border around all the headings, it’s time to add a radius to the border. We have been using the border-radius property to add a 25-pixels border to heading 1. This single value for the border-radius property would be smeared to all 4 corners of a border equally.
After this, we have been using two values for the property “border-radius”. We have applied these values for heading three: the first value for the top-left corner, the second for the top-right & bottom-left corner, and the third value for the bottom-right corner. The last styling for heading 4 contains 4 values for the border-radius property: top-left, top-right, bottom-left, and bottom-right respectively. Let’s save and run this code.
With the use of different values for the border-radius, we have the altered headings on the webpage shown below. The use of the border-radius property with 25 pixels has been making the border-radius curve from all sides for heading 1. After that, the use of the border-radius property with 2 values has been displaying a more outlined curve for the top-left and bottom-right corners as compared to the top-right and bottom-left corners in heading 2. The use of three values for heading three is showing the clear outline border change in the top-right and bottom-left corners as compared to other sides. The last heading has been showing the change in all corners.
Example 02:
It’s time to create an outline for a border along with curves in its corners. So, we have been using a total of 3 headings within the “body” tag of an HTML tag. The headings are initialized with the “h1” heading tag. The largest size heading to be produced on the webpage. All the three headings are specified with three different classes: a, b, and c. These classes will be used in the style tag to style the headings differently.
So, within the style tag of a “head” tag in the HTML file, we have been specifying the headings along with their classes to style them separately. We have been using the border-radius property for all the three headings while the radius has been set to different values for the three headings: 10px, 25px, and 50px. The padding and width for all the three headings have been specified with the same values, 10px and 500px respectively. We have been using the height property for the first two headings, 40px each. We have been setting the background property for the first heading, green color background.
The border property has been used for the 2nd and third heading to specify the border thickness, 5px. Its style is solid, and the color of a border to be generated. The outline property for the borders has been only used in the third heading creating a 5px thick dotted outline. Let’s save and compile this code to see the changes.
The output of this HTML code has been showing the first heading a slight little curve from the corners with no thin border and filled with the green background color. The purple border of heading 2 is curvier and heading 3 contains a border with a dotted blueish outline.
Conclusion:
This guide is demonstrating the use of borders in HTML codes along with their other properties like border-radius and outline. We have discussed the HTML examples to style the curves of a border with the help of a border-radius property. Along with that, we have seen how we can fill the borders of specific elements with the background property and create outlines outside of the border using the outline property. Throughout these examples, the use of width, height, and padding properties was very beneficial to be utilized in the code.
About the author
Aqsa Yasin
I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.
Все о свойстве 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-DIRECTIONHi 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-класс и применять его к множеству элементов на странице.