2022.2

menuclicktherespectiveelement.
2. ClicktheBordertab.
3. UnchecktheoptionSame for all sidestobeabletostyleeachsideoftheborderseparately.
4. Specifythewidthoftheborder(side).Thisisequivalenttotheborder-widthpropertyinCSS.
5. Specifythestyleoftheborder(side),suchassolid,dashedordotted.Thisisequivalenttothe
border-stylepropertyinCSS.
6. Specifythecoloroftheborder(side):selectanamedcolor(definedinthe"ColorsProperties"on
page439)fromthedrop-down,orclickthecoloredsquaretoopentheColorPickerdialog("Color
Picker"onpage438).AlternativelyyoucouldtypeanameorvalueintheColorfielddirectly.It
mustbeapredefinedCSScolorname(CSScolornames),ahexadecimalcolorcode(HTMLHex
Color),anRGBcolorvalue,forexamplergb(216,255,170)oraCMYKcolorvalue,for
examplecmyk(15%, 0%, 33%, 0%).
Thissettingisequivalenttotheborder-colorpropertyinCSS.
Note: Itisalsopossibletosetanelement'sborderinastylesheet;see"Stylingtemplateswith
CSSfiles"onpage261.
Roundingcorners
Anyelementinatemplatecanhaveroundedcorners.Forboxesandimages,thisoptionisavailablein
theFormattingdialog.Forotherelements,youhavetocreateaCSSruletosettheborder-radiusof
theelement(orclassofelements).
Boxes, images and tables
Toroundthecornersofabox,imageortable:
1. SelectaBox,ImageorTableelement(see"Selectinganelement"onpage174)andonthe
Formatmenuclicktherespectiveelement.Alternatively,right-clicktheelementandclickthe
respectiveelementontheshortcutmenu.
2. OnthefirsttabintheFormattingdialog(theBox,ImageorTabletabrespectively)specifythe
corner radiusinameasure(10mm,5px,0.5in)orpercentage(0-90%).
3. ForaBoxorImage,clickApplytoseetheeffectwithoutclosingthedialogorOKtoclosethedia-
log.
ForaTable,youhavetotakeyetanotherstep.Tablescan'thaveroundedcornersandcollapsedbor-
dersatthesametime.Allbuilt-intablestylesintheDesignerhavecollapsedborders.Fortherounded
cornerstoshow,youmustcreateaCSSrulethatsetsthetable'sborder-collapsepropertytosep-
arateinsteadofcollapse.
Page 286