Html image border top

CSS border-top Property

Set the style of the top border for different elements:

h1 <
border-top: 5px solid red;
>

h2 border-top: 4px dotted blue;
>

Definition and Usage

The border-top shorthand property sets all the top border properties in one declaration.

The properties that can be set must be in the following order:

If border-top-color is omitted, the color applied will be the color of the text.

Default value:	medium none color
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.borderTop=»3px dashed blue» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
border-top-width	Required. Specifies the width of the top border. Default value is «medium»	Demo ❯
border-top-style	Required. Specifies the style of the top border. Default value is «none»	Demo ❯
border-top-color	Optional. Specifies the color of the top border. Default value is the color of the text	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Источник

Как добавить границу к изображению в CSS

Границы или рамки делают изображения более привлекательными. В этой статье мы покажем, как добавить границу к изображению.

Элемент имеет атрибут, который не используется в версиях после HTML5. Поэтому мы рекомендуем использовать CSS свойство border вместо этого.

1. Создайте HTML

img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">

2. Добавьте CSS

• Добавьте style к элементу .
• Укажите width изображения.
• Укажите ширину, стиль и цвет границы с помощью свойства border.

img < width:650px; border:1px solid black; >

Пример

html> html> head> title>Заголовок документа title> style> img < width:650px; border:1px solid black; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Как добавить стиль к изображению границы

Для того, чтобы изменить цвет границы, можно добавить CSS свойство color. Если хотите получить двойную границу, необходимо добавить свойство padding к стилю изображения:

Пример

html> html> head> title>Заголовок документа title> style> img < width:650px; padding:1px; border:1px solid #021a40; > style> head> body> h2>Пример двойной границы h2> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Возможно также получить двойную границу с разными цветами внутренней границы. Для этого добавьте свойство background-color.

Пример

html> html> head> title>Заголовок документа title> style> img < width:650px; padding:5px; border:8px solid #999999; background-color: #e6e6e6; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Можете также указать границы по отдельности. Для этого используйте CSS свойства border-bottom, border-top, border-left и border-right и для каждого задайте разные значения width. Рассмотрим пример, где свойство border-bottom установлено так, чтобы получился эффект баннера.

Пример

html> html> head> title>Заголовок документа title> style> img < width: 225px; border: 8px solid #ccc; border-bottom: 130px solid #ccc; > style> head> body> img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" alt="Nature"> body> html>

Для того, чтобы добавить стиль к границе изображения, добавьте свойство border-style к элементу .

Пример

html> html> head> title>Заголовок документа title> style> img < width:650px; padding:5px; border:12px #1c87c9; border-style: dashed; background-color: #eee; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Как задать углы и получить круглые границы

Для того, чтобы указать каждый угол границы, необходимо использовать CSS свойство border-radius. Свойство border-radius может иметь от одного до четырех значений. Рассмотрим пример с четырьмя значениями:

Запомните, что при использовании четырех значений они будут применены к углам в следующем порядке: top-left, top-right, bottom-right, bottom-left.

Пример

html> html> head> title>Заголовок документа title> style> img < width:650px; padding:2px; border:3px solid #1c87c9; border-radius: 15px 50px 800px 5px; > style> head> body> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> body> html>

Вместо того, чтобы пытаться вложить изображение в другой элемент, или редактировать каждое изображение в photoshop для получения желаемого эффекта, вам необходимо установить свойство border-radius в значение 50% или 999em. Задайте одинаковые значения для width и height.

Пример

html> html> head> title>Заголовок документа title> style> div.imageborder < border-radius: 999em; width: 350px; height: 350px; padding: 5px; line-height: 0; border: 10px solid #000; background-color: #eee; > img < border-radius: 999em; height: 100%; width: 100%; margin: 0; > style> head> body> h2>Пример круглой границы h2> div class="imageborder"> img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" height="350" width="350" alt="iceland" /> div> body> html>

Источник

HTML Image Borders

This page contains copy/paste HTML image border codes. These are codes that create borders around your HTML images. You can take these codes and modify them for your own use.

You create HTML image borders by using Cascading Style Sheets (CSS). Specifically, you use the CSS border property. You can also use other CSS properties to create HTML borders (such as border-width , border-style and border-color ), but these don’t do anything that border doesn’t do. That’s because border is shorthand for those other properties.

When you use the border property, you need to supply three parameters; Width, Style, and Color. The code looks something like this: border:1px solid black

Below are examples of HTML image borders. The code is provided and you can copy/paste and modify as you wish.

Source Code	Result

Source Code	Result

Source Code	Result

Source Code	Result

Source Code	Result

Source Code	Result

Variations of Image Borders

You can create different variations of your HTML image borders if you like. For example, you could have a different style of border on each side of your image. Or you could have a different width or color on different sides. You could also choose to only have a border on one side. Be creative!

CSS provides four properties for defining border properties for each side of your image. These are border-top , border-right , border-bottom , and border-left .

Below are some examples of these types of variations.

Source Code	Result

Source Code	Result

You can also combine the border property with the other properties. For example, you can set the border properties of all sides using border property, then override one or more sides using the other, more specific properties.

Source Code	Result

Background Images

Another way to add an image to a web page is to add the image as a background image.

Linked Images

You can also have linked images on your web page. These are images that, when clicked on, open another web page or URL. To create a linked image, see our HTML Links page.

Источник

border-top

The border-top shorthand CSS property sets all the properties of an element’s top border.

Try it

As with all shorthand properties, border-top always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

border-top-style: dotted; border-top: thick green; 

It is actually the same as this one:

border-top-style: dotted; border-top: none thick green; 

The value of border-top-style given before border-top is ignored. Since the default value of border-top-style is none , not specifying the border-style part results in no border.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-top: 1px; border-top: 2px dotted; border-top: medium dashed green; /* Global values */ border-top: inherit; border-top: initial; border-top: revert; border-top: revert-layer; border-top: unset; 

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

Values

Formal definition

• border-top-width : medium
• border-top-style : none
• border-top-color : currentcolor

• border-top-width : the absolute length or 0 if border-top-style is none or hidden
• border-top-style : as specified
• border-top-color : computed color

• border-top-color : a color
• border-top-style : discrete
• border-top-width : a length

Formal syntax

border-top =
||
||

=
|
thin |
medium |
thick

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

Examples

Applying a top border

HTML

div>This box has a border on the top side.div> 

CSS

div  border-top: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; > 

Results

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 Feb 21, 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-top

Свойство border-top позволяет одновременно установить толщину, стиль и цвет границы сверху элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

Синтаксис

border-top: [border-width || border-style || border-color] | inherit

Значения

border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-top

Объектная модель

[window.]document.getElementById(» elementID «).style.borderTop

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Источник