{"id":16041,"date":"2023-10-11T11:58:54","date_gmt":"2023-10-11T06:28:54","guid":{"rendered":"https:\/\/fastbitlab.com\/?p=16041"},"modified":"2023-10-11T11:59:32","modified_gmt":"2023-10-11T06:29:32","slug":"stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl","status":"publish","type":"post","link":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/","title":{"rendered":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 59| Exercise implementation on simulator part-4"},"content":{"rendered":"<div class=\"boldgrid-section color4-background-color color-4-text-contrast bg-background-color\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-lg-1 col-md-12 col-sm-12 col-xs-12\"><\/div>\n<div class=\"col-lg-10 col-md-12 col-xs-12 col-sm-12\">\n<p class=\"\">&nbsp;<\/p>\n<h1 class=\"\" style=\"text-align: center; font-size: 35px; line-height: 50px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><strong><span style=\"color: #000080;\">How to apply borders to objects in LVGL?<\/span><\/strong><\/h1>\n<div class=\"row bg-editor-hr-wrap\">\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\n<div>\n<div class=\"bg-hr bg-hr-16 color2-color\" style=\"border-style: solid; border-width: 0px 0px 2px; box-shadow: #cecece 0px 0px 0px 0px;\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">In this article, we will discuss how to apply borders to objects. Explore techniques to set border colors and adjust border widths using LVGL.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">Here, there is a base object &#8211; Rectangle. The base object has a border. You can add this border, and you can control the width of the border.&nbsp;<\/span><\/p>\n<figure id=\"attachment_16044\" aria-describedby=\"caption-attachment-16044\" style=\"width: 497px\" class=\"wp-caption aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-16044 \" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/09\/Figure-1-5.png\" alt=\"Figure 1. RGB demo\" width=\"497\" height=\"307\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1-5.png 1397w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1-5-300x185.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1-5-1024x633.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-1-5-768x474.png 768w\" sizes=\"(max-width: 497px) 100vw, 497px\" \/><figcaption id=\"caption-attachment-16044\" class=\"wp-caption-text\">Figure 1. RGB demo<\/figcaption><\/figure>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">To achieve this, you can employ a similar API to the one you previously utilized. Take a look at the following code snippet:<\/span><\/p>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #ff0000;\"><b>lv_obj_set_style_border_color(rect, lv_color_black(), LV_PART_MAIN);<\/b><\/span><\/p>\n<ul class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">This line sets the border color of the rect object to black.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">lv_color_black() returns an LVGL color object representing black.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">The LV_PART_MAIN parameter specifies that the border color change should be applied to the main part of the object.<\/span><\/li>\n<\/ul>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">Now, let&#8217;s delve into controlling the border width:<\/span><\/p>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #ff0000;\"><strong>lv_obj_set_style_border_width(rect, 5, LV_PART_MAIN);<\/strong><\/span><\/p>\n<ul class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">This line sets the border width of the rect object to 5 pixels.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">The LV_PART_MAIN parameter specifies that the border width change should be applied to the main part of the object.<\/span><\/li>\n<\/ul>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #000080;\"><b>Code<\/b><\/span><\/p>\n<pre class=\"color-5-text-contrast color5-background-color\" style=\"box-shadow: #cecece 0px 0px 0px 0px;\"><span style=\"font-weight: 400;\"><span style=\"color: #008000;\">\/* Create a base object to use it as rectangle *\/<\/span>\r\nlv_obj_t* rect = lv_obj_create(lv_scr_act());<\/span>\r\n<span style=\"font-weight: 400;\">lv_obj_set_size(rect, 300, 80);<\/span>\r\n<span style=\"font-weight: 400;\">lv_obj_align_to(rect, slider_b, LV_ALIGN_TOP_MID, 0, 30);<\/span>\r\n<span style=\"font-weight: 400;\">lv_obj_set_style_border_color(rect, lv_color_black(), LV_PART_MAIN);<\/span>\r\n<span style=\"font-weight: 400;\">lv_obj_set_style_border_width(rect, 5, LV_PART_MAIN);<\/span><\/pre>\n<p class=\"\">&nbsp;<\/p>\n<figure id=\"attachment_16045\" aria-describedby=\"caption-attachment-16045\" style=\"width: 574px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-16045\" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/09\/Figure-2-5.png\" alt=\"Figure 2. Output- borders\" width=\"574\" height=\"315\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-5.png 1041w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-5-300x165.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-5-1024x562.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-5-768x421.png 768w\" sizes=\"(max-width: 574px) 100vw, 574px\" \/><figcaption id=\"caption-attachment-16045\" class=\"wp-caption-text\">Figure 2. Output<\/figcaption><\/figure>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">In the following article, we will add labels. Should you wish to experiment with label addition, navigate to the widget section, proceed to the core widget, and then explore the label section.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-size: 18px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #993366;\"><strong>Get Microcontroller Embedded C Programming Full Course on<\/strong> <span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/www.udemy.com\/course\/microcontroller-embedded-c-programming\/\">Here<\/a><\/span>.<\/span><\/p>\n<p class=\"\" style=\"font-size: 20px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #000080;\"><strong>FastBit Embedded Brain Academy Courses<\/strong><\/span><\/p>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/fastbitlab.com\/course1\">https:\/\/fastbitlab.com\/course1<\/a><\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<\/div>\n<div class=\"col-lg-1 col-md-12 col-sm-12 col-xs-12\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; How to apply borders to objects in LVGL? &nbsp; In this article, we will discuss how to apply borders to objects. Explore techniques to set border colors and adjust border widths using LVGL.&nbsp; Here, there is a base object &#8211; Rectangle. The base object has a border. You can add this border, and you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":16045,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"off","ocean_gallery_id":[],"footnotes":""},"categories":[8],"tags":[],"class_list":["post-16041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","entry","has-media"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to apply borders to objects in LVGL?<\/title>\n<meta name=\"description\" content=\"How to apply and control borders on objects? Explore techniques to set border colors and adjust border widths using LVGL. Like Rectangle\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to apply borders to objects in LVGL?\" \/>\n<meta property=\"og:description\" content=\"How to apply and control borders on objects? Explore techniques to set border colors and adjust border widths using LVGL. Like Rectangle\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/\" \/>\n<meta property=\"og:site_name\" content=\"FastBit EBA\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/fastbiteba\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-11T06:28:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-11T06:29:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1041\" \/>\n\t<meta property=\"og:image:height\" content=\"571\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"FastBitLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:site\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"FastBitLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/\"},\"author\":{\"name\":\"FastBitLab\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\"},\"headline\":\"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 59| Exercise implementation on simulator part-4\",\"datePublished\":\"2023-10-11T06:28:54+00:00\",\"dateModified\":\"2023-10-11T06:29:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/\"},\"wordCount\":282,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Figure-2-5.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/\",\"name\":\"How to apply borders to objects in LVGL?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Figure-2-5.png\",\"datePublished\":\"2023-10-11T06:28:54+00:00\",\"dateModified\":\"2023-10-11T06:29:32+00:00\",\"description\":\"How to apply and control borders on objects? Explore techniques to set border colors and adjust border widths using LVGL. Like Rectangle\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/#primaryimage\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Figure-2-5.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/Figure-2-5.png\",\"width\":1041,\"height\":571,\"caption\":\"Figure 2. Output\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 59| Exercise implementation on simulator part-4\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"name\":\"FastBit EBA\",\"description\":\"Your Online Academy of Embedded Systems\",\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\",\"name\":\"FastBit EBA\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"width\":640,\"height\":640,\"caption\":\"FastBit EBA\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/fastbiteba\\\/\",\"https:\\\/\\\/x.com\\\/fastbiteba\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/fastbit-embedded-brain-academy-b3167b124\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCa1REBV9hyrzGp2mjJCagBg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\",\"name\":\"FastBitLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"caption\":\"FastBitLab\"},\"description\":\"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to apply borders to objects in LVGL?","description":"How to apply and control borders on objects? Explore techniques to set border colors and adjust border widths using LVGL. Like Rectangle","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/","og_locale":"en_US","og_type":"article","og_title":"How to apply borders to objects in LVGL?","og_description":"How to apply and control borders on objects? Explore techniques to set border colors and adjust border widths using LVGL. Like Rectangle","og_url":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/","og_site_name":"FastBit EBA","article_publisher":"https:\/\/www.facebook.com\/fastbiteba\/","article_published_time":"2023-10-11T06:28:54+00:00","article_modified_time":"2023-10-11T06:29:32+00:00","og_image":[{"width":1041,"height":571,"url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-5.png","type":"image\/png"}],"author":"FastBitLab","twitter_card":"summary_large_image","twitter_creator":"@fastbiteba","twitter_site":"@fastbiteba","twitter_misc":{"Written by":"FastBitLab","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/#article","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/"},"author":{"name":"FastBitLab","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d"},"headline":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 59| Exercise implementation on simulator part-4","datePublished":"2023-10-11T06:28:54+00:00","dateModified":"2023-10-11T06:29:32+00:00","mainEntityOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/"},"wordCount":282,"commentCount":1,"publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-5.png","articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/","url":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/","name":"How to apply borders to objects in LVGL?","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/#primaryimage"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-5.png","datePublished":"2023-10-11T06:28:54+00:00","dateModified":"2023-10-11T06:29:32+00:00","description":"How to apply and control borders on objects? Explore techniques to set border colors and adjust border widths using LVGL. Like Rectangle","breadcrumb":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/#primaryimage","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-5.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/09\/Figure-2-5.png","width":1041,"height":571,"caption":"Figure 2. Output"},{"@type":"BreadcrumbList","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvglmcu3-how-to-apply-borders-to-objects-in-lvgl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fastbitlab.com\/blog\/"},{"@type":"ListItem","position":2,"name":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 59| Exercise implementation on simulator part-4"}]},{"@type":"WebSite","@id":"https:\/\/fastbitlab.com\/blog\/#website","url":"https:\/\/fastbitlab.com\/blog\/","name":"FastBit EBA","description":"Your Online Academy of Embedded Systems","publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fastbitlab.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fastbitlab.com\/blog\/#organization","name":"FastBit EBA","url":"https:\/\/fastbitlab.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","width":640,"height":640,"caption":"FastBit EBA"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/fastbiteba\/","https:\/\/x.com\/fastbiteba","https:\/\/www.linkedin.com\/in\/fastbit-embedded-brain-academy-b3167b124\/","https:\/\/www.youtube.com\/channel\/UCa1REBV9hyrzGp2mjJCagBg"]},{"@type":"Person","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d","name":"FastBitLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","caption":"FastBitLab"},"description":"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries."}]}},"_links":{"self":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/16041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/comments?post=16041"}],"version-history":[{"count":5,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/16041\/revisions"}],"predecessor-version":[{"id":16101,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/16041\/revisions\/16101"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media\/16045"}],"wp:attachment":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media?parent=16041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/categories?post=16041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/tags?post=16041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}