Border

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Not the answer you’re looking for? Browse other questions tagged html css rounded-corners html-table or ask your own question.

The Overflow Blog

How to develop a defensive plan for your open-source software project

Coming together as a community to connect

Featured on Meta

The Q1 2020 Community Roadmap is on the Blog

An Update On Creative Commons Licensing

Community and Moderator guidelines for escalating issues via new response…

Triage needs to be fixed urgently, and users need to be notified upon…

How does the Triage queue work?

Linked

How can I have a rounded border on my table and border-collapse: collapse?

-webkit- and -moz-border-radius does not work on tables?

CSS border radius and border collapse

Get table with round corners and border around it

-1

Table border-radius

-1

Border radius not working for each row

How to set border radius to table border?

css styling table issue

How-to create rounded corners on Table Head only

Issues with CSS and HTML — Border Radius and Background Color

see more linked questions…

Hot Network Questions

How to find n points on a plane so that as many pairs of points as possible have the same distance?
Church-style CoC with axiom for induction over Church-encoded unit, is it consistent?
Why would the offspring of a clone not suffer from a degenerative illness?
Why do Western countries seem to be less efficient than Asian countries in fighting against COVID-19?
Is there a spell that allows you to divine what happened «here»?
Could vikings make something close to modern reverse draw crossbow?
Do both buddies on a tandem need to know how to ride a bike?
Mother milk of 6 Corona-positive (COVID-19) women does not contain the virus — can we make a confidence statement about this?
When use setq or set ‘
Is it safe to flush newspaper down the toilet?
Numbers by Position
Hamiltonian of non-regular Lagrangian is well-defined on phase space
How would a species be unable to produce steel?
Difference in meaning between “elderly” and «old»?
No electrical to the dashboard after attempting jumpstart with Schumacher charger
Why would a B-29 consume more fuel at 17 kft than at 9 kft?
Calculating row-wise time difference in python
Conservation of Energy with Identical Rolling Disks
Could we have avoided the whole UTF-16 fiasco?
pyopenGL OBJ loader improvements
What is the different between magento 2.2 and 2.3?
How can I add more fluff to my stories?
How do I use existing cat5e wiring to distribute internet in my house?
What prevents laws from being interpreted pedantically?

Question feed

Stack Overflow works best with JavaScript enabled

Not the answer you’re looking for? Browse other questions tagged html css rounded-corners html-table or ask your own question.

The Overflow Blog

How to develop a defensive plan for your open-source software project

Coming together as a community to connect

Featured on Meta

The Q1 2020 Community Roadmap is on the Blog

An Update On Creative Commons Licensing

Community and Moderator guidelines for escalating issues via new response…

Triage needs to be fixed urgently, and users need to be notified upon…

How does the Triage queue work?

Visit chat

Linked

How can I have a rounded border on my table and border-collapse: collapse?

-webkit- and -moz-border-radius does not work on tables?

CSS border radius and border collapse

Get table with round corners and border around it

-1

Table border-radius

-1

Border radius not working for each row

How to set border radius to table border?

css styling table issue

How-to create rounded corners on Table Head only

Issues with CSS and HTML — Border Radius and Background Color

see more linked questions…

Hot Network Questions

Can one use a whole note to span a full 5/4 measure?
Church-style CoC with axiom for induction over Church-encoded unit, is it consistent?
No electrical to the dashboard after attempting jumpstart with Schumacher charger
Was the Apollo 13 CO2 problem a matter of capacity, or of rate?
Hamiltonian of non-regular Lagrangian is well-defined on phase space
Why would a very advanced Transhumanist Civilization ever need to have a military or wage wars?
Conservation of Energy with Identical Rolling Disks
Is there a spell that allows you to divine what happened «here»?
How should we interpret Dave Cutler’s criticism of Unix?
If work is a scalar measurement, why do we sometimes represent it as the product of force (a vector) and distance (scalar)?
Required documents on arrival with person waiting outside, at arrival area. How can the documents be provided to the person arriving, at customs?
Can Prestidigitation create medical gloves?
How do I calculate resistance when I have the voltage drop?
How did the authorities not find the speakeasy clubs during the prohibition?
How to address dropping out of grad school
Day of the week of an ambiguous date
Purpose of turbo switch on systems unable to slow to 4.77 MHz?
How can you build a model of tetrahedral coordination from objects found at home?
What does Piketty mean by the C90/C10 ratio?
VideoPlay crashes the Kernel with Mathematica 12.1
Andrew’s House Cleaning — A Word Ladder
Can programming «mutate»?
Why is Rorschach’s mask symmetrical?
Mother milk of 6 Corona-positive (COVID-19) women does not contain the virus — can we make a confidence statement about this?

Question feed

Stack Overflow works best with JavaScript enabled

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

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

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

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

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

Также есть свойства

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

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

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

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

Пример рамки для цитаты

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

Синтаксис CSS border

Где:

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

Примечание

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

Not the answer you’re looking for? Browse other questions tagged html css rounded-corners html-table or ask your own question.

The Overflow Blog

How to develop a defensive plan for your open-source software project

Coming together as a community to connect

Featured on Meta

The Q1 2020 Community Roadmap is on the Blog

An Update On Creative Commons Licensing

Community and Moderator guidelines for escalating issues via new response…

Triage needs to be fixed urgently, and users need to be notified upon…

How does the Triage queue work?

Visit chat

Linked

How can I have a rounded border on my table and border-collapse: collapse?

-webkit- and -moz-border-radius does not work on tables?

CSS border radius and border collapse

Get table with round corners and border around it

-1

Table border-radius

-1

Border radius not working for each row

How to set border radius to table border?

css styling table issue

How-to create rounded corners on Table Head only

Issues with CSS and HTML — Border Radius and Background Color

see more linked questions…

Hot Network Questions

How can we objectively measure the perception of truthfulness of different governments?
Why do statutes of limitations exist?
Can one use a whole note to span a full 5/4 measure?
Mother milk of 6 Corona-positive (COVID-19) women does not contain the virus — can we make a confidence statement about this?
Conservation of Energy with Identical Rolling Disks
Do both buddies on a tandem need to know how to ride a bike?
Having a conversation with girlfriend over possible future, when she shuts everything down?
Latitude, longitude and altitude of Ckoirama Observatory; where can things like this be looked-up?
Generating all hexominoes by cutting and pasting
Name your novel disease
What are the implications of the EARN IT Act?
How can a company trade at a market cap below its cash on hand?
ShellCheck is carping that my expression is not in double quotes when it really is; why?
Was the Apollo 13 CO2 problem a matter of capacity, or of rate?
A bit of a digital XOR
Church-style CoC with axiom for induction over Church-encoded unit, is it consistent?
How should we interpret Dave Cutler’s criticism of Unix?
Does a ranged casting distance include touch?
I am yet to grow old
Do you guys usually add 子 for objects with one syllable?
Are there significant additional risks in changing jobs during the COVID-19 pandemic?
Why is Bxh6 not preferred here?
Is exploratory data analysis (EDA) actually needed / useful
COVID-19 — how do I navigate this situation with my advisor?

Question feed

Stack Overflow works best with JavaScript enabled

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

CSS 属性

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function
appearance
backface-visibility
background
background-attachment background-blend-modebackground-clip
background-color
background-image background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color border-bottom-left-radiusborder-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color border-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-width
border-left
border-left-color
border-left-style
border-left-width border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color border-top-left-radiusborder-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-align
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack box-shadow
box-sizing
caption-side
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells filterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrap
float
font @font-face
font-family
font-size font-size-adjustfont-stretch
font-style
font-variant
font-weight
grid-columns
grid-rows
hanging-punctuation
height
icon justify-content@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width @media
min-height
min-width
nav-down
nav-index
nav-left
nav-right
nav-up
opacity order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
position
punctuation-trim
quotes
resize
right
rotation tab-size
table-layout
target
target-name
target-new
target-position
text-align text-align-last
text-decoration text-decoration-colortext-decoration-linetext-decoration-style
text-indent
text-justify
text-outline
text-overflow
text-shadow
text-transform
text-wrap
top
transform
transform-origin
transform-style
transition transition-delaytransition-duration
transition-property
transition-timing-function unicode-bidi
vertical-align
visibility white-space
width word-break
word-spacing
word-wrap
z-index

CSS Border Style

The property specifies what kind of border to display.

The following values are allowed:

— Defines a dotted border
— Defines a dashed border
— Defines a solid border
— Defines a double border
— Defines a 3D grooved border. The effect depends on the border-color value
— Defines a 3D ridged border. The effect depends on the border-color value
— Defines a 3D inset border. The effect depends on the border-color value
— Defines a 3D outset border. The effect depends on the border-color value
— Defines no border
— Defines a hidden border

The 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:

p.dotted {border-style: dotted;}p.dashed
{border-style: dashed;}p.solid {border-style: solid;}p.double
{border-style: double;}p.groove {border-style: groove;}p.ridge
{border-style: ridge;}p.inset {border-style: inset;}p.outset
{border-style: outset;}p.none {border-style: none;}p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

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.

No border.

A hidden border.

A mixed border.

Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the
property is set!

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index