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
9
How can I have a rounded border on my table and border-collapse: collapse?
17
-webkit- and -moz-border-radius does not work on tables?
3
CSS border radius and border collapse
1
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
11
How-to create rounded corners on Table Head only
1
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
9
How can I have a rounded border on my table and border-collapse: collapse?
17
-webkit- and -moz-border-radius does not work on tables?
3
CSS border radius and border collapse
1
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
11
How-to create rounded corners on Table Head only
1
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
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
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
9
How can I have a rounded border on my table and border-collapse: collapse?
17
-webkit- and -moz-border-radius does not work on tables?
3
CSS border radius and border collapse
1
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
11
How-to create rounded corners on Table Head only
1
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
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
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